Windy's Blog在做一个项目，一个页面会有不少的图片载入，现在搜索引擎都提倡用户体验，如果因为图片多，导致加载慢影响了用户体验也得不偿失
找到了解决方案：
用lazyload.js延迟加载图片的原理：
图片延迟加载的工作原理
图片延迟加载的工作原理是：当图像区域进入Viewport时在的img标签的src属性写入图片的路径。这通常是使用JavaScript实现。默认情况下，src属性设置为空或者统一用特定的小图进行填充。
以下是一个简单的图片延迟加载的页面示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <!-- lazyload.js can be any lazy loading library --> <script src="lazyload.js"></script> </head> <body> <img src="blank.gif" data-img-src="http://qnimate.com/1.png"> <img src="blank.gif" data-img-src="http://qnimate.com/2.png"> <img src="blank.gif" data-img-src="http://qnimate.com/3.png"> <img src="blank.gif" data-img-src="http://qnimate.com/4.png"> </body> </html> |
在这个示例中，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应用的代码示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!doctype html> <html> <head> <title>Qazy</title> <script> var qazy_image = "http://qnimate.com/blank.gif"; //custom placeholder </script> <scriptsrc="https://cdn.rawgit.com/qnimate/Qazy/master/qazy.min.js"></script> </head> <body> <img src="lazy-loading.jpg" data-qazy="true"> <br> <img src="offline-web-apps.jpg" data-qazy="true"> <br> <img src="random-color.jpg" data-qazy="true"> <br> <img src="revel-scroll.jpg" data-qazy="true"> <br> <img src="wordpress-fields-metaboxes.jpg" data-qazy="true"> </body> </html> |
由于官方的qazy.min.js包含了一个base64加密的loading图片，导致js文件达到了120K，我们可以另外找到一张loading图片，进行base64加密，然后替换掉官方的即可，贴上我修改的qazy.min.js代码，只有5K
|
1 2 |
function reveal(){for(var A=0;A<view_elements.length;A++){var q=0,g=view_elements[A];do isNaN(g.offsetTop)||(q+=g.offsetTop);while(g=g.offsetParent);var B=window.pageYOffset,Q=window.innerHeight,C=0,g=view_elements[A];do isNaN(g.offsetLeft)||(C+=g.offsetLeft);while(g=g.offsetParent);var I=window.pageXOffset,w=window.innerWidth;q>B&&B+Q>q&&C>I&&I+w>C?(view_elements[A].src=view_elements[A].getAttribute("data-qazy-src"),console.log(view_elements[A].src),view_elements.splice(A,1),A--):console.log("offsetParentTop"+q+" pageYOffset"+B+" viewportHeight"+window.innerHeight)}}function qazy_list_maker(){for(var A=document.querySelectorAll("img[data-qazy][data-qazy='true']"),q=0;q<A.length;q++){view_elements.push(A[q]),A[q].setAttribute("data-qazy","false");var g=A[q].src;A[q].setAttribute("data-qazy-src",g),A[q].src=qazy_image}}var qazy_image=qazy_image||"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTIxIDc1IiBzdHlsZT0iYmFja2dyb3VuZDogbm9uZTsiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1IDUwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjEwIiBmaWxsPSIjZjNmM2YzIiB0cmFuc2Zvcm09InNjYWxlKDAuMTU2NDU2IDAuMTU2NDU2KSI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgYmVnaW49Ii0wLjMzMzMzMzMzMzMzMzMzMzNzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjMgMCAwLjcgMTswLjMgMCAwLjcgMSIgdmFsdWVzPSIwOzE7MCIga2V5VGltZXM9IjA7MC41OzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwIDUwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjEwIiBmaWxsPSIjZDhkZGRmIiB0cmFuc2Zvcm09InNjYWxlKDAuNjEwMzggMC42MTAzOCkiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGJlZ2luPSItMC4xNjY2NjY2NjY2NjY2NjY2NnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuMyAwIDAuNyAxOzAuMyAwIDAuNyAxIiB2YWx1ZXM9IjA7MTswIiBrZXlUaW1lcz0iMDswLjU7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzUgNTApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iMTAiIGZpbGw9IiNiOGJhYmQiIHRyYW5zZm9ybT0ic2NhbGUoMC45NzIxNDIgMC45NzIxNDIpIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBiZWdpbj0iMHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuMyAwIDAuNyAxOzAuMyAwIDAuNyAxIiB2YWx1ZXM9IjA7MTswIiBrZXlUaW1lcz0iMDswLjU7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+",view_elements=[]; window.addEventListener("resize",reveal,!1),window.addEventListener("scroll",reveal,!1);var intervalObject=setInterval(function(){qazy_list_maker()},50);window.addEventListener("load",function(){clearInterval(intervalObject),qazy_list_maker(),reveal()},!1); |
未经允许不得转载：Windy's Blog » 用lazyload.js延迟加载图片，并避免对SEO的影响
