自己写jquery.lazyloading图片延迟加载插件，通用 – 真爱无限的CSDN博客 – 博客频道 – CSDN.NET

jquery.lazyloading.js的作用/加载过程/原理/设计思路：

1、刚加载页面时只加载html,不加载图片，图片的src为空，把真实的图片路径放到data-original属性中，页面加载速度变快；

2、在页面加载完成之后，js初始化，把有data-original属性的图片再加一个<div></div>在外面，再创建一个隐藏的<img />标签，并且根据原图片的大小和位置计算loading图片的位置，把loading图片显示在中间；

3、判断window的scroll事件（滚动条变化），判断图片在不在可视区域内，如果在可视区域内，那么执行第4步，否则什么也不做。

4、判断图片的src与data-original是不是相同，如果不相同（说明还没有加载），执行第5步，否则什么也不做。

5、把图片的data-original赋值给隐藏的<img />标签的src，当隐藏的图片完全加载好之后（完成后会执行它的.load()事件），再把隐藏图片的src赋值给原图片的src(原因：保证loading图片消失后目标图片立即显示，如果一开始把data-original赋值给图片的src，那么还没加载完就会显示图片，网页中图片是一截一截显示的，非常难看).

 

（为了保证在火狐中，图片未加载或图片路径不对，图片的位置被其他元素占用），请不要写.lazyloading的css样式，否则页面会乱。

通用的图片的html：

<div style=”width: 772px; height: 449px;”>

<img class=”lazyloading” src=”” data-original=”/ListPicThumbnail/list90.jpg” height=”772″ width=”449″>

</div>

或者l：

<div style=”width: 772px; height: 449px;”>

<a href=”#” target=”_blank”> <img class=”lazyloading” src=”” data-original=”/ListPicThumbnail/list90.jpg” height=”772″ width=”449″> </a>

</div>

 

不断修改完善中……

最后更新：2013-12-17 16:00:00

加载等的图片：

 

/*!

* jquery.lazyoading.js

*自定义的页面图片延迟加载插件，比网上的jquery.lazyload简单，也更适合自己的网站

*使用方法：

把img 的class加上 lazyloading,data-original 放图片的真实路径

然后先引用jquery，再引用jquery.lazyoading.js，再调用：$(“img.lazyloading”).lazyloading({loadfirst:true});

* by pukuimin

* 2013-11-01

*2013-11-08 解决了图片没有指定高度的问题

*2013-11-14 解决了没有指定高度加载图片之后有间隔的问题

*2013-12-17 加入了<span>图片显示时的 animate过渡效果</span>，把alt赋值给title

*/

/// <reference path=”jquery-1.8.2.min.js” />

(function ($) {

$.fn.lazyloading = function (options) {

var defaults = {

preyimg: “/Content/images/Imgpreview/grey.gif”,

picpath: “data-original”,

container: $(window),

loadfirst: false, //进入页面后是否加载当前页面的图片

defaultHeightID: “lazyloadingHeight”//页面上默认高度的input标签id

//imgPaddingID: “lazyloadingPadding”//img的padding值

};

var params = $.extend({}, defaults, options || {});

params.cache = [];

$(this).each(function () {

var node = this.nodeName.toLowerCase(), url = $(this).attr(params[“picpath”]), preyimg = params[“preyimg”];

var defaultheight = $(“#” + params[“defaultHeightID”]).val(); //, padding = $(“#” + params[“imgPaddingID”]).val(); //

//重组

var data = {

obj: $(this),

tag: node,

url: url,

preyimg: preyimg,

defaultheight: defaultheight

};

params.cache.push(data);

});

var init = function () {

$.each(params.cache, function (i, data) {

var thisImg = data.obj, tag = data.tag, url = data.url, preyimg = data.preyimg;

if (typeof (url) != “undefined”)// 判断是否需要延迟加载

{

var parent1 = thisImg.parent(); //a

var Inner = null; //

if (parent1.is(“a”) == true) {//img wrap by a

Inner = parent1;

}

else {

Inner = thisImg;

}

var width = thisImg.attr(“width”) || thisImg.css(“width”);

var height = data.defaultheight || thisImg.css(“height”);

//if (i == 0) alert(data.defaultheight);

var attrheight = thisImg.attr(“height”);

if (attrheight != null) height = attrheight;

if (width != null && width.indexOf(“px”) > -1) width.replace(“px”, “”);

if (height != null && height.indexOf(“px”) > -1) height.replace(“px”, “”);

var divstr = “<div class=’.loading’ style=’text-align: left;position:relative;float:left;width:” + width + “px;”;

var HasHeight = true; //图片是否指定了高度

divstr = divstr + “height:” + height + “px;”;

if (attrheight == null || attrheight == “”) {

HasHeight = false;

}

thisImg.css(“position”, “relative”);

divstr = divstr + “‘ ></div>”

//修正外层div：text-align的影响

Inner.wrap(divstr);

//修正img外面不是a标签时parent()已经改变的问题

parent1 = thisImg.parent();

if (HasHeight == true) { parent1.attr(“lazyloading_hasheight”, “1”); } //是否指定了高度

else { { parent1.attr(“lazyloading_hasheight”, “0”); } }

parent1.append(“<img class=’loadhiddenimg’ width=’0′ height=’0′ style=’display:none;’ src=” />”);

thisImg.attr(“src”, preyimg);

thisImg.removeAttr(“width”).removeAttr(“height”);

thisImg.attr(“width1”, width).attr(“height1”, attrheight);

////thisImg.attr(“width”, “50px”).attr(“height”, “50px”); //loading图大小

//thisImg.css(“margin”, “0 auto”);

thisImg.css(“margin”, ((height / 2) – 25) + “px auto auto ” + ((width / 2) – 25) + “px”);

$(“.lazyloading”).css(“display”, “table”); //.css(“position”, “relative”);

}

});

}

//动态显示数据

var loading1 = function () { };

var loading = function () {

//窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度

var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());

var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度

$.each(params.cache, function (i, data) {

var thisImg = data.obj, tag = data.tag, url = data.url, post, posb;

if (thisImg) {//对象不为空

if (typeof (url) != “undefined”) {// 判断是否需要延迟加载

var PictureTop = parseInt(thisImg.offset().top);

//如果处理可见范围内，并且原图地址data-original不等于src,则加载图片

if (PictureTop >= thisTop && PictureTop <= thisButtomTop && thisImg.attr(“data-original”) != thisImg.attr(“src”)) {

var hiddenImg = thisImg.siblings(“img.loadhiddenimg”);

hiddenImg.load(function () { //隐藏图片加载完之后的回调函数

var width = thisImg.attr(“width1”);

var height = thisImg.attr(“height1”);

thisImg.attr(“width”, width).attr(“height”, height).removeAttr(“width1”).removeAttr(“height1”);

thisImg.css(“margin”, “0 auto”);

if (thisImg.parent().attr(“lazyloading_hasheight”) == “0”) {//没有指定高度时，加载图片后去掉div高度自适应

if (thisImg.parent().is(“a”) == true) {

thisImg.parent().parent().css(“height”, “”);

}

else {

thisImg.parent().css(“height”, “”);

}

}

thisImg.load(function () {

if (thisImg.parent().is(“a”) == true) {

thisImg.parent().parent().css(“height”, thisImg.height());

}

else {

thisImg.parent().css(“height”, thisImg.height());

}

});

thisImg.css(‘opacity’, ‘0.2’);

thisImg.attr(“src”, hiddenImg.attr(“src”));

thisImg.animate({ opacity: 1.0 });

if (thisImg.attr(“alt”) != “”) {

thisImg.attr(“title”, thisImg.attr(“alt”));

thisImg.attr(“alt”, “”);

}

}).error(function () {

thisImg.error(function () {

thisImg.css(“margin”, “0 auto auto 0”);

if (thisImg.parent().attr(“lazyloading_hasheight”) == “0”) {//没有指定高度时，加载图片后去掉div高度自适应

if (thisImg.parent().is(“a”) == true) {

thisImg.parent().parent().css(“height”, “”);

}

else {

thisImg.parent().css(“height”, “”);

}

}

});

thisImg.attr(“src”, hiddenImg.attr(“src”)); //alert(“error”);

if (thisImg.attr(“alt”) != “”) {

thisImg.attr(“title”, thisImg.attr(“alt”));

thisImg.attr(“alt”, “”);

}

});

hiddenImg.attr(“src”, url);

}

}

}

});

};

//初始化

init();

//事件触发

//加载完毕即执行

if (params[“loadfirst”] == true) loading();

//滚动执行

params.container.bind(“scroll”, loading).bind(“resize”, loading);

};

})(jQuery);

 

 

用法示例：

&lt;<span class="start-tag">div</span> <span class="attribute-name">style</span>="width: 190px; height: 237px; float: left;"&gt;&lt;<span class="start-tag">a</span> <span class="attribute-name">href</span>="http://maga.kinpan.com/Magazine/MagazineEachperiod/sdlp?id=201311011146457968750c36ca60628"&gt;

<img alt=”商业街区” src=”” data-original=”http://account.kinpan.com/Upload/Magazine/MagazineBookImage/201311011141232812500a4cbf15f0f.jpg” width=”190″ height=”237″ class=”lazyloading” /></a>

</div>

 

 

&lt;<span class="start-tag">script</span> <span class="attribute-name">type</span>="text/javascript"&gt;

$(function () {

$(“img.lazyloading”).lazyloading({ loadfirst: true });

 

})

</script>

 

 

使用本插件有任何问题可以一起交流，我的常用邮箱：pukuimin@qq.com

来源URL：http://blog.csdn.net/pukuimin1226/article/details/16120581