记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

使用延迟加载图片插件 提高网页打开速度

作者:Kaka    时间:2013-10-21 9:48:51    浏览:    评论:2

      如果一张网页有几十张甚至上百张图片需要展示,那么当打开网页时如果从头到尾不间断加载完,必定需要花费很长的时间,严重的情况还会导致网页停滞假死,这将给用户带来极坏的使用体验,因此需要解决这个问题。

      这里介绍一个使用很广泛的插件Lazy Load,Lazy Load是一个用JavaScript 编写的 jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。这个图片延迟加载插件,对于那些图片较多的长页面是非常有好处的。

      这是演示页面

      Lazy Load插件下载及使用方法

      Lazy Load插件包含两个js文件:

jquery.min.js
jquery.lazyload.js

      可以在这里下载:下载插件

      而使用方法也非常简单。

      1、在网页任何位置(一般是在</body>前面)加上如下代码(注意<script>引用的两个js文件,路径自行设定):

<script src="js/jquery.min.js"></script>
<script src="js/jquery.lazyload.js?v=1.9.0"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {
     $("img.lazy").lazyload();
  });
</script>

      2、图片的html代码<img>标签需要这样写:

<img class="lazy" src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">

      说明:

      ①:<img>里加上class="lazy"

      ②:<img>里的src为一张预加载的图片,使用只有几十字节大小的圆点gif图片即可。

      ③:<img>里的data-original为真正需要显示的图片地址。

      ④:<img>里的alt为图片说明文字,在图片还没加载时显示。这个可有可无。

      Lazy Load插件其他功能

      Lazy Load插件还有其他的一些功能,例如淡入展示效果;事件触发加载,如click、mouseover;隐藏图片加载等,需要了解更多可以进入作者的网站:http://www.appelsiini.net/projects/lazyload

Tags: JavaScript  

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

上一篇: webkaka国内首推网站压力在线测试工具
下一篇: JPG图片保存时慎用“渐进式浏览器显示”格式

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009 All Rights Reserved.