返回

lazyload 在 iPad 上的问题

公司有同事发现在 iPad 上浏览网站首页会出现图片一直不出现的情况,然后自然而然的被归在了“首页打开慢”这类情况之中,排查服务器 CDN 都没有问题之后便指定是前端问题了。

然后我打开 IOS 模拟器进行测试,发现这么一个现象,当你快速向下滚动的时候页面没有停止,用了 lazyload 的图片总是不会出来,然后如果你的手指一直没有离开屏幕的话图片也始终不出来,只有当你把页面静止的时候可视区域的图片才能正常显示,这个现象比较难描述,所以录制了个视频,测试的是淘宝首页,也是有这个问题的:

视频备份

所以想到的优化方案是去掉 lazyload,这样页面的请求数就下不来了,考虑通过下面几块的内容通过下拉异步 load 进来,也可以考虑将 HTML 内容存储在 script 标签或者 textarea 标签中,下拉的时候再渲染。另外如果大面积使用 lazyload 在 IE 下面滚动页面会非常的卡,很耗 CPU 资源,这么说来有些技术确实应该合理的使用。

UPDATE:

貌似是 Safari 在滚动的时候会终止 JS 的执行以提高滚动的丝滑程度。