用lazyload.js延迟加载图片,并避免对SEO的影响

在做一个项目,一个页面会有不少的图片载入,现在搜索引擎都提倡用户体验,如果因为图片多,导致加载慢影响了用户体验也得不偿失

找到了解决方案:

用lazyload.js延迟加载图片的原理:

图片延迟加载的工作原理
图片延迟加载的工作原理是:当图像区域进入Viewport时在的img标签的src属性写入图片的路径。这通常是使用JavaScript实现。默认情况下,src属性设置为空或者统一用特定的小图进行填充。
以下是一个简单的图片延迟加载的页面示例:

在这个示例中,lazyload.js会检查图片是否有进入viewport,然后把data-img-src的值分配给img的src属性。

图片延迟加载对于SEO的影响
搜索引擎通常是通过图片的src属性去查找图片的,但在大多数图片延迟加载的页面中,真正的图片路径并不在src属性中。这样搜索引擎就无法抓取和收录延迟加载的图片,查看快照会发现并没有想要显示的图片出现。

优化方案,不使用lazyload.js,用qazy.js
根据上边的描述,如果可以给 src属性写入真正的页面URL,那么问题就可以得到解决。具体的实现方法可参考Narayan的Qazy代码段:https://github.com/qnimate/Qazy。

该代码段的实现原理是:Qazy禁止浏览器在图片未进入viewport时就获取图像。

Qazy脚本需要在网页上尽早加载(尽量放在靠前的位置),以便它可以开始监测图版并延迟加载图片。

Demo:http://labs.qnimate.com/qazy-lazy-loading/
Qazy应用的代码示例:

由于官方的qazy.min.js包含了一个base64加密的loading图片,导致js文件达到了120K,我们可以另外找到一张loading图片,进行base64加密,然后替换掉官方的即可,贴上我修改的qazy.min.js代码,只有5K

 

 

 

未经允许不得转载:Windy's Blog » 用lazyload.js延迟加载图片,并避免对SEO的影响

赞 (0)