图片延迟加载

在做一个图片较多的网站中,如果一次性加载全部图片难免网站打开速度有点慢,所以 嘿  ~ 嘿 ~ 嘿~

<script type="text/javascript">
(function($){
var queue = [];var queueMap = [];var coordinate = {};var n = 0;lazyLoder = {
push:push,
load:load,
clear:clear,
show:show
}
function show(){
alert(queueMap);
alert(queueMap.length);
alert(queue.length);
}
function push(img){
$(img).attr("sid")?$(img).attr("sid"):$(img).attr("sid",n++);
var id = $(img).attr("sid");
if(!queueMap[id]){
queue.push(img);
queueMap[id] = id;
}
}
function load(){
if(queue.length==0){return}
computeCoodinate();
var temp = [];

for (var i = 0; i < queue.length ;i++ ){
if($(queue[i]).attr("isOK")==1){
temp.push(i);
continue;
}
if(check(queue[i])==true){
loadIMG(queue[i]);
temp.push(i);
$(queue[i]).attr("isOK",1);
}
}
while(temp.length>0){
queue.splice(temp.pop(),1);
}
}
function clear(){
queue.length=0;
}
/*private function*/
function computeCoodinate(){
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
coordinate.down = scrollTop > (coordinate.top?coordinate.top:0);
coordinate.up = scrollTop < (coordinate.top?coordinate.top:0);

coordinate.top = scrollTop;
coordinate.bottom = scrollTop + windowHeight;
}
function check(target){
var offset = $(target).offset();
var height = $(target).height();
var flag = true;
flag = flag && (offset.top>coordinate.top);
flag = flag && (offset.top < coordinate.bottom);
if (flag == false){
flag = flag && ((offset.top+height) > coordinate.top);
flag = flag && ((offset.top+height) < coordinate.bottom);
}
return flag;
}
function loadIMG(img){
setTimeout(function(){
$(img).attr("src",$(img).attr("lazy"));
},1);
}

})($)
var lazyloadImgID = setInterval(function(){
$("img[lazy]").each(function(){
lazyLoder.push(this)
});
lazyLoder.load();
},1);
$(document).ready(function(){
clearInterval(lazyloadImgID);
$("img[lazy]").each(function(){
lazyLoder.push(this);
});
lazyLoder.load();
$(window).bind("scroll",lazyLoder.load).bind("resize",lazyLoder.load);
});
</script>
原文地址:https://www.cnblogs.com/zhpblog/p/6955372.html