图片延迟加载 jquery.lazyload.js

来源：互联网发布：学霸通软件下载编辑：程序博客网时间：2024/05/18 00:42

一、使用JQuery的lazyload.js插件实现

1. JS

- 载入JQuery

- 载入lazyLoad插件

- 配置js设置

<script type="text/javascript">$(document).ready(function(){$("img.lazy").lazyload({placeholder : "img/default.gif",//点位图片threshold:200,//设置threshold为200令图片在距离屏幕200像素时提前加载。effect:"fadeIn",//淡入淡出效果(show/fadeIn/slideDown)//event : "click",//事件触发时才加载.(click/mouseover/sporty/foobar)failurelimit:10000,//图片排序混乱时,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.});});</script>

2. HTML

- 设置CSS样式类 .lazy

- 图片地址不用src，设置为data-original='PIC URL',width和height必须。

<img class="lazy" data-original="http://bbs.home.news.cn/upfiles/0468B6AE.002C" width="765" height="574" alt="" />

Demo源码

<!DOCTYPE html><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Jquery lazyload.jquery.js插件 载入图片延时</title></head><body><div id="container" class="" align="center"><img class="lazy" data-original="http://d.hiphotos.baidu.com/image/pic/item/d8f9d72a6059252dff61080f329b033b5bb5b942.jpg" width="765" height="574" alt="demo img" /><br /><br /><img class="lazy" data-original="http://pic1.nipic.com/2009-02-20/2009220135032130_2.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://p4.gexing.com/shaitu/20120922/1520/505d66aac9e7b.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://img05.tooopen.com/images/20150314/tooopen_sy_82508172855.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://imgsrc.baidu.com/forum/pic/item/0ea6ba6eddc451da3189c429b6fd5266d116326c.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://imgsrc.baidu.com/forum/pic/item/e42b1dd8bc3eb135d193e747a61ea8d3fc1f4493.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://b.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d65ee407d7040828381e30fd50.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://b.hiphotos.baidu.com/image/pic/item/ac345982b2b7d0a265c13423c9ef76094b369a07.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://bbs.home.news.cn/upfiles/0468B6AE.002C" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://s15.sinaimg.cn/middle/5c69ce18hb6dda61ccf9e&690" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://img3.a0bi.com/upload/ttq/20150406/1428280201544.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://img.blog.163.com/photo/fsP38IK-lL1rl06v5xvL-Q==/282037926664740273.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://uploadfile.bizhizu.cn/2014/0721/20140721030354406.jpg" width="765" height="574" alt="" /><br /><br /><img class="lazy" data-original="http://tupian.qqjay.com/u/2013/0106/8_205849_11.jpg" width="765" height="574" alt="" /><br /><br /></div>  </body><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="jquery.lazyload.min.js"></script><script type="text/javascript">$(document).ready(function(){$("img.lazy").lazyload({placeholder : "img/default.gif",//点位图片threshold:200,//设置threshold为200令图片在距离屏幕200像素时提前加载。effect:"fadeIn",//淡入淡出效果(show/fadeIn/slideDown)//event : "click",//事件触发时才加载.(click/mouseover/sporty/foobar)failurelimit:10000,//图片排序混乱时,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.});});</script></html>

offical website:http://plugins.jquery.com/lazyload/

Github:https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

CN:http://www.w3cways.com/1765.html

二、非插件实现需JQuery

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" language="javascript"></script><script type="text/javascript"> $(function(){  var $winH = $(window).height();  var $img = $("#show img");  var $imgH = parseInt($img.height()/2);  var $srcDef = "http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif";  runing();  $(window).scroll(function(){   runing();  })  function runing(){   $img.each(function(i){    var $src = $img.eq(i).attr("original");    var $scroTop = $img.eq(i).offset();    if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)    {     if($img.eq(i).attr("src") == $srcDef){      $img.eq(i).hide();     }     $img.eq(i).attr("src",function(){return $src}).fadeIn(300);    }   })  } })</script><style type="text/css"> *{ border:0;} a{ display:inline; float:left; margin:55px; background:#ccc; overflow:hidden; font-size:0;}</style></head><body> <div id="show">        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103315039.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103315039.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103315039.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>    </div></body></html>

这个是转的，暂时找不到出处了。。。回头补

0 0