JavaScript滚动事件不能在iOS7上开机 [英] JavaScript scroll event not firing on iPhone with iOS7

问题描述

我使用懒惰的图像加载技术。每当视口出现新图像时，src属性将被设置，以便可以加载图像。这种技术已经工作了好几年，直到iOS7出来。

正常浏览页面工作正常。但是当你关闭浏览器，等一下，打开一些其他的应用程序，然后再回来，它不再工作了。有时候，标签之间的切换也可以杀死功能。

  $（window）.bind（'scroll resize'，function（） 
 checkImages（）; 
}）; 
  

请参阅JSFiddle的完整演示： http://jsfiddle.net/NZqGL/1/

我知道JavaScript执行被暂停用于非活动应用和浏览器标签。但是事件是无限制的对我来说是新的。

这也很难测试，因为行为是非常不可预测的。有时它需要2秒钟的闲置时间才能被破坏，有时它会继续工作。

在iOS 7.0.4上测试

更新2014年2月12日：这是iOS 7.0中确认的错误，Apple已经确认这将在iOS 7.1中修复。

解决方案

使用touchend事件是可以接受的解决方法。

释放手指和滚动事件之间有延迟。当您手指快速移动屏幕时，您释放手指后滚动将持续一段时间。

iOS有另一个错误，阻止执行JavaScript当页面仍然滚动时。所以有效的触动事件会在实际的滚动之后触发（而不是你释放手指的那一刻）。所以滚动和触摸事件同时发生。

现在我正在听这两个事件，我使用一个timer / setTimeout构造来防止代码执行两次。

I use a lazy loading technique for images. Whenever a new image appears in the viewport the src attribute will be set so the image can be loaded. This technique has been working for years, until iOS7 came out.

It's working fine with a regular pageview. But when you close the browser, wait a bit, open some other apps perhaps, and then come back it isn't working anymore. Sometimes switching between tabs kills the functionality as well.

$(window).bind('scroll resize', function () {
    checkImages();
});

See JSFiddle for a complete demo: http://jsfiddle.net/NZqGL/1/

I'm aware of JavaScript execution being suspended for inactive apps and browser tabs. But events being unbound is new for me.

It's also very hard to test, since the behaviour is very unpredictable. Sometimes it takes 2 seconds of inactivity to get broken, sometimes it'll just keep working.

Tested on iOS 7.0.4

Update Feb 12th 2014: this is a confirmed bug in iOS 7.0, Apple has confirmed this will be fixed in iOS 7.1.

解决方案

Using the touchend event is an acceptable workaround here.

There is a delay between releasing your finger and the scroll event. When you're moving your finger fast accross the screen the scrolling will continue for a while after you've released your finger.

iOS has another bug that prevents executing of JavaScript when the page is still scrolling. So effectively the touchend event will fire after the actual scrolling (instead of the moment you 've released your finger). So the scroll and touchend event fire at the same time.

For now I'm listening to both events and I use a timer/setTimeout construction to prevent the code from executing twice.

这篇关于JavaScript滚动事件不能在iOS7上开机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！