Qazy.js延迟加载懒加载图片,不影响SEO搜索引擎获取真实图片地址

懒惰加载-无SEO负面影响

Qazy是一个图像延迟加载程序,与库无关(没有jQuery)。

Qazy移除负面SEO影响。这就是它有别于其他懒惰加载器的原因。

在网页中尽快加载脚本,这样它就可以开始跟踪图像并懒洋洋地加载它们。

Qazy.js延迟加载懒加载图片,不影响SEO搜索引擎获取真实图片地址

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

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

找到了解决方案:

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

图片延迟加载的工作原理

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

以下是一个简单的图片延迟加载的页面示例:

<!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://aisoa.cn/1.png">
    <img src="blank.gif" data-img-src="http://aisoa.cn/2.png">
    <img src="blank.gif" data-img-src="http://aisoa.cn/3.png">
    <img src="blank.gif" data-img-src="http://aisoa.cn/4.png">
</body>
</html>

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

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

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

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

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

github地址:https://github.com/narayanprusty/Qazy

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

Demo:http://labs.qnimate.com/qazy-lazy-loading/

Qazy应用的代码示例:

<!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>

只需要在需要延迟加载的图片里面添加data-qazy="true",然后再引用一个3kb大小的js就行了。非常方便,个人感觉比lazyload.js效果好。

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

<script>
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/jpg;base64,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",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);
</script>

官方QQ群号码:922069959

您可能感兴趣的文章

留言评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注