关于loazyload的应用以及原理大家早已耳熟能详,无非是元素进入可视区或即将进入可视区的时候进行加载动作。

可视区的计算

通过对window绑定scroll事件,获取被隐藏在可视区域上方的像素数, 再计算img纵向偏移量。当被隐藏在可视区域上方的像素数大于img纵向偏移量+可视区高度时替换img的src。

很多时候业务需要让页面初始化的时候就定位到页面某个位置,前面那样简单的判断会对页头至定位目标位置之间img浪费加载。可以通过getBoundingClientRect()方法获取img相对于视口的位置,从而判断是否需要加载目标图片。

事件节流

scroll、touchmove、resize事件会触发大量的计算,在低版本Andorid版本浏览器中卡顿甚至崩溃,我们可以简单做一些事件节流的操作。

lazyEvalLazy.debounce用来优化resize事件。lazyEvalLazy.throttled用来优化scroll、touchmove等事件,避免频繁触发。

响应式图片

一般响应式图片解决方案:

现在<picture>元素好像很有用。假如你的chrome版本是38+,在新标签页打开chrome://flags,勾选’启用实验性网络平台功能enable-experimental-web-platform-features,重启, 查看demo
目前浏览器对<picture>元素支持的不太好,可以做一些降级处理。

用例如window.HTMLPictureElement这样的方法来判断浏览器是是否支持<picture>,对不支持<picture>的元素引入respimage.js,或者直接内置到你lazyload组件里。

如果全部以iphone为基准做高清图,那么90%以上的手机对服务器端的请求至少多出40%,对服务器和带宽都是巨量的消耗。在无wifi情况下,看的最多的就是菊花转和进度条,根本不能愉快的购物。也许可以这样做:

现在iphone6、iphone6 plus也有了一定的份额,屏幕越来越大,高清图加载越来越吃力。也许可以对这些设备做一些优化:

先加载一个很小的图片,然后等待高清图像load完毕再替换一下src,这样就有了一个图像模糊到高清的过程,相比空白区域的等待也许会好一些。

事件的监听与触发

通常异步获取数据插入到页面的时候需要再次执行例如$(element).lazyload()这样的方法,这样不利于不了解这个组件的人使用。
我们可以检测window.MutationObserver事件或对document.documentElement绑定DOMAttrModified事件触发lazyload行为。

其它事件监听

源码参考:https://github.com/aFarkas/lazysizes

水平有限,抛砖引玉。

喜欢(454) 评论(2) 分享
  1. 学习了,京东主页的大模块1F 2F 3F…等,都是有这种方式解决的。

Leave a Reply

© 2017 JDC. All Rights Reserved.