实现了图片延迟加载功能，插件代码非常简洁，且每个功能都把注释写得非常详细，适合网友们学习，好好利用哦

引入图片延迟加载Jquery插件文件后，页面使用代码如下：

  1. <script type="text/javascript" charset="utf-8">
  2.     $(".lazyLoading").imgLazyLoading({
  3.         // 记录图片真实地址的属性名
  4.         url : "data-url",
  5.         // 图片渐出效果以及渐出时间
  6.         fadeIn : 400
  7.     });
  8. </script>

JS插件代码：

  1. /**======================================
  2. * 名称:imgLazyLoading
  3. * 描述:基于jQuery的图片延迟加载插件
  4. * 版本:1.0.1
  5. * 日期:2013-6-18
  6. * 兼容:在火狐,IE6-10,谷歌,360测试OK
  7. * 来源:
  8. 使用方式:
  9. <script type="text/javascript" charset="utf-8">
  10.     $(".lazyLoading").imgLazyLoading({
  11.         // 记录图片真实地址的属性名
  12.         url : "data-url",
  13.         // 图片渐出效果以及渐出时间
  14.         fadeIn : 400
  15.     });
  16. </script>
  17. 如果用户禁用了JS解决方案
  18. <noscript><img src="" /></noscript>
  19. 这是目前最简单和最有效的解决js在禁用
  20. 的情况下依然显示图片
  21. =======================================**/
  22.  
  23. //定义匿名函数并立即执行
  24. (function($){
  25.  
  26.     $.fn.imgLazyLoading = function(options)
  27.     {
  28.         //定义需要的参数的初始值,合并options对象然后赋值到变量set,如果存在相同的值那么进行覆盖
  29.         var init = $.extend({url:"data-url",fadeIn:0},options || {});
  30.         var cache = [];
  31.  
  32.         //为所有指定class="lazyloading"的元素执行这个匿名函数
  33.         $(this).each(function()
  34.         {
  35.             var nodeName = this.nodeName.toLowerCase();//返回节点的名称,并且转换为小写
  36.             var url = $(this).attr(init.url);//获取options参数的值
  37.             //获取每个元素的信息,存入临时对象data里面,然后插入到cache对象
  38.             var data = {
  39.                 obj : $(this),//当前选中的元素
  40.                 url : url,//图片指向地址
  41.                 tag : nodeName//节点的名字
  42.             }
  43.             cache.push(data);//向cache数组的末尾添加元素,并返回新的长度
  44.         });
  45.  
  46.         var lazyLoading = function()
  47.         {
  48.             //用each函数遍历cache数组
  49.             $.each(cache,function(key, val)
  50.             {
  51.                 var obj = val.obj;
  52.                 var url = val.url;
  53.                 var tag = val.tag;
  54.                 if(obj)
  55.                 {
  56.                     var winHeight = $(window).height();//当前窗口高度
  57.                     var scrolltop = $(window).scrollTop();//滚动条偏移高度
  58.                     var imgTop = obj.offset().top;//图片元素在当前视口的相对偏移
  59.                     //判断是否在当前窗口内
  60.                     if((imgTop-scrolltop) > 0 && (imgTop-scrolltop) < winHeight)
  61.                     {
  62.                         if(tag === "img")
  63.                         {
  64.                             if(init.fadeIn)
  65.                             {
  66.                                 //渐出效果
  67.                                 obj.fadeIn(init.fadeIn);
  68.                             }
  69.                             //给src属性赋值
  70.                             obj.attr("src", url);
  71.                         }
  72.                         else
  73.                         {
  74.                             return false;
  75.                         }
  76.                         val.obj = null;//清空,不清空会重复负责,重复请求
  77.                     }
  78.                 }
  79.             });
  80.         }
  81.         //加载后立即执行
  82.         lazyLoading();
  83.         //添加滚动事件
  84.         $(window).bind("scroll",lazyLoading);
  85.     };
  86. })(jQuery);

JS

HTML代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  5. <title>网友猎人分享原创图片延迟加载jquery插件</title>
  6.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  7.     <script>
  8.         window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>')
  9.     </script>
  10. <script type="text/javascript" src="imglazyloading.js"></script>
  11. </head>
  12. <body>
  13.     <div style="height:800px;width:700px; text-align:center; font-size:20px; font-weight:bold; margin:30px auto; color:#FF0000;">鼠标往下滚动就可以看到效果啦</div>
  14.     <img  data-url="images/11235MW1-4.jpg" class="lazyLoading"/>
  15.     <img  data-url="images/11235L447-3.jpg" class="lazyLoading"/>
  16.     <img  data-url="images/11235L305-1.jpg" class="lazyLoading"/>
  17.     <img  data-url="images/11235K258-0.jpg" class="lazyLoading"/>
  18.     <script type="text/javascript" charset="utf-8">
  19.     $(".lazyLoading").imgLazyLoading({
  20.         // 记录图片真实地址的属性名
  21.         url : "data-url",
  22.         // 图片渐出效果以及渐出时间
  23.         fadeIn : 4000
  24.     });
  25. </script>
  26. </body>
  27. </html>

HTML

转自：http://www.jq----school.com/Detail.aspx?id=282

图片延迟加载jquery插件imgLazyLoading的更多相关文章

  1. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  2. 图片延迟加载jquery插件imgLazyLoad(三)

    此Jquery插件是在图片加载前显示一个加载图片,当图片下载完毕后显示图片出来,可对图片进行是否自动缩放功能,此Jquery插件使用时可让页面先加载,而图片后加载的方式,解决了平时使用时要在图片显示出 ...

  3. 延迟加载图片的 jQuery 插件：Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  4. Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  5. 插件介绍 ：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

  6. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  7. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

  8. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  9. Lazy Load, 延迟加载图片的 jQuery 插件【备忘】

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...

随机推荐

  1. [转]Mybatis极其(最)简(好)单(用)的一个分页插件

    原文地址:http://blog.csdn.net/isea533/article/details/23831273 分页插件示例:http://blog.csdn.net/isea533/artic ...

  2. 【BZOJ 4600】【SDOI 2016】硬币游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=4600 转化成nim游戏 因为对于每一个反面朝上的硬币编号可以拆成\(2^a3^bc\),选择这个硬币 ...

  3. hadoop,mapreduce---分布式计算

    从图中可以看出,map阶段的shuffle: 例如word count,当内存缓冲区满的时候会写到磁盘,一个spill,每个spill,进行分区,排序,最后将同一个分区word合并在一起,写入到磁盘中 ...

  4. js-字符串转化日期

    endLogTimeDate = “2012-05-22 17:10:46” startLogTimeDate = “2012-05-22 17:10:46” var endLogTimeDate = ...

  5. 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件

    CustomResource ResourceDictionary 加载外部的 ResourceDictionary 文件 示例1.演示“CustomResource”相关知识点Resource/Cu ...

  6. dede使用方法----如何去掉dede自带的版权

    最近有朋友问如何将dede的Power by DedeCms去掉,一来为了安全,二来外链确实有些影响,这里分享下去除方法,需要的朋友可以参考下   自从dedecms织梦系统更新到6.7日的版本,底部 ...

  7. bzoj 1503 splay

    因为是整体加减,所以直接记录在外面. #include<iostream> #include<cstdio> #include<cstring> #include& ...

  8. BZOJ 1115: [POI2009]石子游戏Kam

    1115: [POI2009]石子游戏Kam Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 883  Solved: 545[Submit][Stat ...

  9. vmware安装ubuntu卡在install vm-tools

    vmware,安装ubuntu或者centos,都有这个问题:vmware自作聪明,提示说"快速安装",然后会使用一个autoinst.iso文件来快速安装,并且装完系统后该重启了 ...

  10. 【poj3422】 Kaka's Matrix Travels

    http://poj.org/problem?id=3422 (题目链接) 题意 N*N的方格,每个格子中有一个数,寻找从(1,1)走到(N,N)的K条路径,使得取到的数的和最大. Solution ...