图片延迟加载

感冒了,这周的状态很差,昏昏沉沉的!两天休息在家好好休息了下,今天又点好点了,清醒了就捣鼓了一个我安排在我的便签上的一个功能,图片的延迟加载!衷心感谢Ferris的实例网站(http://fgm.cc/learn/)!虽然没有教程,但代码都是写的非常规整的,让人看的很明白,很适合我们这种初学者学习,起到很好的引导思路的作用!

首先贴上代码:

window.onload=window.onscroll=window.onresize=function(){
var box=document.getElementById("body");
var allimg=box.getElementsByTagName("img");
var oimg=noLoadImg(allimg);
var iScrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var iClientHeight=document.documentElement.clientHeight+iScrollTop;
var itop=ibottom=0;
var oParent = null;
if(oimg.length)
{
for(var i=0;i<oimg.length;i++)
{
oParent = oimg[i].parentElement;
itop=pageY(oParent);
ibottom=itop+oParent.offsetHeight;
if((itop>iScrollTop&&itop<iClientHeight)||(ibottom>iScrollTop&&ibottom<iClientHeight))
{
loadimg(i,oimg);
}
}
}
//未加载的图片
function noLoadImg(imglist)
{
var noloadimg=[];
for(var i=0;i<imglist.length;i++)
{
if(imglist[i].className!="loaded")
{
noloadimg.push(imglist[i]);
}
}
return noloadimg;
}
//渐现图片
function loadimg(j,oimg)
{
var timer=null,alpha=0;
timer=setInterval(function(){
oimg[j].src=oimg[j].attributes["imgurl"].nodeValue;
oimg[j].className = "loaded";
alpha+=2;
if(alpha>100){alpha=100};
oimg[j].style.opacity=alpha/100;
oimg[j].style.filter="alpha(opacity="+alpha+")";
if(alpha==100){clearInterval(timer)};
},20)
}
//Ferris的一个函数
//取对象的Y轴相对窗体高度-兼容ie
function pageY(element) {
return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
}
}

我做的是把图片的链接地址放在Img的自定义的属性里,然后在js里调用赋给Img的链接上去。也可以把图片的链接地址放在数组里面。这个的话就看个人意愿了。

主要是当前页面的img元素全部都能显示到,然后当前窗口显示不到的页面图片就不加载链接地址。方法是通过当前img的上级元素的相对页面高度或者自身的相对页面高度(因为一般都是有边框或者间距的,所以用上级的相对高度比较准确点:个人理解)判断是否在当前的页面内,之内的就显示,之外的就不操作,然后给操作过得Img元素附上一个class来区别加载和未加载的img元素,之后就是绑定到事件上去。

代码上没有做面向对象也没有封装。只是自我学习。本来一直在兼容问题没有得到处理,在IE6下元素的相对高度判断有问题。导致加载区域有问题,然后我就引用了ferris的相对高度的操作函数,又有学到东西!

html:

<div id="body">
<ul>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
<li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
</ul>
</div>

demo地址:http://cowll.com/demo/LazyLoad.html


任何时候对自己认定的作品要精益求精;你不是程序员也不是设计师,你所做的事情是让浏览器成为你的舞台,让网页成为你道具,打开你的网页就是你的观众,这场戏刚刚上演!
原文地址:https://www.cnblogs.com/couxiaozi1983/p/2390665.html