三行代码实现图片延迟加载技术

作者: 鲁智深 分类: idea 发布时间: 2013-10-30 23:55

什么是图片延迟加载技术

当我们打开网站的时候通过右侧下拉条,往下拉的时候,实现图片延迟加载。这是非常不错的技术,提高了用户体验,同时减少了页面加载的时间,也减轻的服务器的压力。

jquery

jquery

主要运用于,淘宝、京东、瀑布流、图片类网站。

jquery.lazyload实现图片延迟加载

什么是imagelazyload技术

在页面上的图片比较多的时候,打开一张图片必然会引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。

imagelazyload技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质额度提升。

将下面三行代码放入 <head> </head>中

1
2
3
4
5
6
7
8
9
  <!-- jquery 类库-->
   <script type="text/javascript" src="js/jquery.min.js" ></script>
   <!-- lazyload -->
   <script type="text/javascript" src="js/jquery.lazyload.mini.js"></script>
   <!-- 调用lazyload方法 -->
    <script type="text/javascript">
    var jq = jQuery.noConflict();
    jq(function(){jq("img").lazyload({placeholder:"images/load.gif",effect:"fadeIn"});});
  </script>

注意{placeholder:”images/load.gif”,effect:”fadeIn”}中的需要load.gif,需要你自己创建一个load.gif图片放入images中。

jquery代码库下载

百度网盘

原理

当屏幕在第一屏的时候其第二屏没有加载,当到第二屏的时候,第三屏,没有加载。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

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