使用jQuery插件实现图片延迟加载以及对SEO的影响

　　最近忙着给自己的博客优化，想把图片的显示改成延迟加载显示，也就是像很多网站那样，当前可视区域的图片加载实现，不可见的区域图片不加载，这 样可以减少网络流量。我找到了Lazy Load 这个用 JavaScript 编写的 jQuery 插件，它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置，这与图片预加载的处理方式正好是相反 的。

　　经过我的一番尝试，这个jQuery LazyLoad图片延迟加载插件已经成功的应用到了我的独立博客（www.vktone.com）上了，下面就来分享一下怎么使用这个jQuery LazyLoad图片延迟加载插件。（官网地址：http://www.appelsiini.net/projects/lazyload）

　　第一步：下载js脚本，最好放到你网站的js存储目录。

　　https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

　　第二步：在html中引用此js脚本，当然也需要jQuery脚本。放在body结束之前最好。

<script type="text/javascript" src="http://files.vktone.com/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://files.vktone.com/js/jquery.lazyload.min.js"></script>

　　第三步：修改html图片标签<img />的写法。

原来的写法：
<img src="img/example.jpg"  width="640" heigh="480">

修改之后的写法：
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

　　要点：src改成一个占位符图片，比如：img/grey.gif，将原来的src放到data-original属性中。为图片<img/>加个class，方面css控制和js脚本访问。

　　第四步：调用lazyload插件方法，让延迟加载生效。

<script type="text/javascript">
//<![CDATA[
$(function(){
	$("img.lazy").lazyload({
		effect       : "fadeIn"
	});
});
//]]>
</script>

　　关于使用jQuery LazyLoad插件实现图片延迟加载的几点考虑：

　　第一，对于动态生成的页面或者静态化的页面需要做些处理，工作量还是有一些的；

　　第二，占位图片也可以设置的有点特色，比如我的博客设置的是：http://files.vktone.com/vktone.gif
　　第三，还可以结合<noscript/>标签，保证不支持js脚本的浏览器也能显示。

　　第四，影响到网站图片的收录。因为这样修改了之后，像百度谷歌之类的搜索引擎来爬页面的时候，图片的地址其实就不对了（都是占位符图片）。

　　第五，可以在<noscript/>标签中把真正的图片地址输出，可能会保证搜索引擎正常收录，不过这只是我的想法，至于搜索引擎会不会正常收录还有待检验。

　　比如，我的博客是这样写的：

<img  alt="李鸣工笔人物画欣赏" class="lazy" src="http://files.vktone.com/vktone.gif" data-original="http://files.vktone.com/files/artres/20130117101900746100_28147497688552181.jpg" />
<noscript><img  alt="李鸣工笔人物画欣赏" src="http://files.vktone.com/files/artres/20130117101900746100_28147497688552181.jpg" /></noscript>

　　另外，加入图片延迟加载效果之后，对于图片加载完后处理的脚本执行会产生影响，比如我想在图片加载完之后放缩图片以调整到适合的宽度，脚本可能就不会执行，最后用了一个定时器来执行这样的处理。比如：resizeImageToFitWidth方法用来调整图片大小，所以我每隔半秒就执行一次，因为无法确定什么时候图片会被加载完，而不使用延迟加载效果的就不会有这样的问题。

window.setInterval(resizeImageToFitWidth, 500);

　　根据别人的经验和我的测试，图片最好指定大小，如果没有height属性可能延迟加载效果不是特别好。

　　关于SEO（搜索引擎收录图片）的测试结果总结（2012-01-31）

　　...

 

 

• 源文【使用jQuery LazyLoad插件实现图片延迟加载】最新版，请访问：
     http://www.vktone.com/articles/lazy-load-images-use-jquery-lazyload-plugin.html

 

评论

1 楼 冯程程 2013-01-31  

我网站也是用这个加载图片,挺喜欢你上面的美女图片的，来加个友情链接三；
http://www.food028.com