当前位置:首页 > 开发 > Web前端 > Jquery > 正文

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

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

  最近忙着给自己的博客优化,想把图片的显示改成延迟加载显示,也就是像很多网站那样,当前可视区域的图片加载实现,不可见的区域图片不加载,这 样可以减少网络流量。我找到了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插件实现图片延迟加载以及对SEO的影响

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号