图片延迟加载jquery插件imgLazyLoading
实现了图片延迟加载功能，插件代码非常简洁，且每个功能都把注释写得非常详细，适合网友们学习，好好利用哦
引入图片延迟加载Jquery插件文件后，页面使用代码如下：
<script type="text/javascript" charset="utf-8"> $(".lazyLoading").imgLazyLoading({ // 记录图片真实地址的属性名 url : "data-url", // 图片渐出效果以及渐出时间 fadeIn : 400 }); </script>
JS插件代码：
/**====================================== * 名称:imgLazyLoading * 描述:基于jQuery的图片延迟加载插件 * 版本:1.0.1 * 日期:2013-6-18 * 兼容:在火狐,IE6-10,谷歌,360测试OK * 来源: 使用方式: <script type="text/javascript" charset="utf-8"> $(".lazyLoading").imgLazyLoading({ // 记录图片真实地址的属性名 url : "data-url", // 图片渐出效果以及渐出时间 fadeIn : 400 }); </script> 如果用户禁用了JS解决方案 <noscript><img src="" /></noscript> 这是目前最简单和最有效的解决js在禁用 的情况下依然显示图片 =======================================**/ //定义匿名函数并立即执行 (function($){ $.fn.imgLazyLoading = function(options) { //定义需要的参数的初始值,合并options对象然后赋值到变量set,如果存在相同的值那么进行覆盖 var init = $.extend({url:"data-url",fadeIn:0},options || {}); var cache = []; //为所有指定class="lazyloading"的元素执行这个匿名函数 $(this).each(function() { var nodeName = this.nodeName.toLowerCase();//返回节点的名称,并且转换为小写 var url = $(this).attr(init.url);//获取options参数的值 //获取每个元素的信息,存入临时对象data里面,然后插入到cache对象 var data = { obj : $(this),//当前选中的元素 url : url,//图片指向地址 tag : nodeName//节点的名字 } cache.push(data);//向cache数组的末尾添加元素,并返回新的长度 }); var lazyLoading = function() { //用each函数遍历cache数组 $.each(cache,function(key, val) { var obj = val.obj; var url = val.url; var tag = val.tag; if(obj) { var winHeight = $(window).height();//当前窗口高度 var scrolltop = $(window).scrollTop();//滚动条偏移高度 var imgTop = obj.offset().top;//图片元素在当前视口的相对偏移 //判断是否在当前窗口内 if((imgTop-scrolltop) > 0 && (imgTop-scrolltop) < winHeight) { if(tag === "img") { if(init.fadeIn) { //渐出效果 obj.fadeIn(init.fadeIn); } //给src属性赋值 obj.attr("src", url); } else { return false; } val.obj = null;//清空,不清空会重复负责,重复请求 } } }); } //加载后立即执行 lazyLoading(); //添加滚动事件 $(window).bind("scroll",lazyLoading); }; })(jQuery);
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>网友猎人分享原创图片延迟加载jquery插件</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>') </script> <script type="text/javascript" src="imglazyloading.js"></script> </head> <body> <div style="height:800px;width:700px; text-align:center; font-size:20px; font-weight:bold; margin:30px auto; color:#FF0000;">鼠标往下滚动就可以看到效果啦</div> <img data-url="images/11235MW1-4.jpg" class="lazyLoading"/> <img data-url="images/11235L447-3.jpg" class="lazyLoading"/> <img data-url="images/11235L305-1.jpg" class="lazyLoading"/> <img data-url="images/11235K258-0.jpg" class="lazyLoading"/> <script type="text/javascript" charset="utf-8"> $(".lazyLoading").imgLazyLoading({ // 记录图片真实地址的属性名 url : "data-url", // 图片渐出效果以及渐出时间 fadeIn : 4000 }); </script> </body> </html>
转自：http://www.jq----school.com/Detail.aspx?id=282
