2074
0图片延迟加载，如何保证用户体验并做好SEO
本期和大家分享一个图片延迟加载SEO方法。现在很多网站（例如一些瀑布流网站）应用了图片延迟加载的功能，当用户打开页面仅显示Viewport视窗里的图片内容。图片延迟加载有利于用户体验但不利于页面图片被搜索引擎爬行和索引。以下是相关原因及解决方案的说明。图片延迟加载的工作原理
图片延迟加载的工作原理是：当图像区域进入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://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属性中。这样搜索引擎就无法抓取和收录延迟加载的图片。
优化方案
根据上边的描述，如果可以给 src属性写入真正的页面URL，那么问题就可以得到解决。具体的实现方法可参考Narayan的Qazy代码段：https://github.com/qnimate/Qazy。该代码段的实现原理是：Qazy禁止浏览器在图片未进入viewport时就获取图像。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>
版权归netconcepts所有，特此声明，转载请注明出处。