[原创]网络图片延迟加载实现,超越jquery2010年3月26日

淘宝,QQ,还有当当，亚马逊之类网之类的都有这个效果，原理是分段加载图片，主要用于大型网站节省带宽，可是他们提供的东西压缩混淆看不清，还有的要基于什么雅虎的什么库，总之是很麻烦的，JQ的控件倒是够清晰了，只是还是没有达到节省网络带宽的效果，于是我在JQ懒加载控件上进行一些改进，改进以后的最大的特点就是调用方便，项目中不需要什么太多更改，而且JS文件也不大.

1.本来这是一个给泡泡网开发控件，需要类似于淘宝的列表页的效果，再往上找了好多的例子，后来就想直接用JQ的延迟控件，但是JQ的延迟控件只是加快了加载速度，没有省带宽，这一点是我的老大发现的，用的火狐测试过，最后没办法了，就只好想另外的办法，改进一下JQ，超越一下就好了，也就是说JQ的懒加载并没有实际提升图片的传输量，还是请各位把代码DOWN了以后验收

　　{http://www.appelsiini.net/projects/lazyload 这个是原来的querylazyload控件的下载地址}

2.本控件用法要注意。（转载注明出处,于2010年3月26日发表于博客园的泡泡网控件，谢谢）

　　1.引用JQ：

<script src="js/jquery.js" type="text/javascript"></script>

JQ没有就去网上DOWN

　　2.把下面贴的代码保存为JS文件

<script src="js/MinmyLazyload.js" type="text/javascript"></script>

添加引用

　　 3.调用语句，和JQ一摸一样，也可以而这样调用,记得是在页面底部，</BODY>标签之前调用

　　

<script type="text/javascript">$("img").lazyload(); </script>

　　或者这样调用

<script type="text/javascript">$("img").lazyload({ placeholder: "images/blue-loading.gif", effect:"fadeIn" });
</script>

　　当然你得先有一张blue-loading.gif的图片，然后得在images文件夹下面才可以这样调用，

　　effect设置显示效果，默认是SHOW的效果，

　　4.前台的IMG标签里不要放SRC，请放入original标签。比如　　代码(function($) {
$.fn.lazyload = function(options) {
var settings = {
threshold: 0,
failurelimit: 0,
event: "scroll",
effect: "show",
container: window,
original: "original",
firstCount: 10, //第一次加载数量
everyCount: 3, //以后每次加载
moveScrollTop: 100//每次移动多少像素加载
};
if (options) {
$.extend(settings, options);
}
var elements = this;
var self = this;
var count = 0;
if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
}
for (i = 0; i < settings.firstCount; i++) {
var trueSrc = $(elements[i]).attr(settings.original);
$(elements[i]).attr("src", trueSrc);
$(elements[i]).attr(settings.original, "finish");

}
$(window).scroll(function() {
elements = $("img@[" + settings.original + "!='finish']"); //获取未加载图片集
var i = 0;
for (i = 0; i < settings.everyCount; i++) {
var trueSrc = $(elements[i]).attr(settings.original);

$(elements[i]).hide().attr("src", trueSrc)[settings.effect](settings.effectspeed);

// $(elements[i]).attr("src", trueSrc);
$(elements[i]).attr(settings.original, "finish");
if (elements.length == 0) {
$(window).unbind("scroll");
};
}
count++;
});
return false;
};
})(jQuery);