javascript实现图片延迟加载方法汇总(三种方法)
看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处在哪里？——当页面有好几屏内容时，有可能用户只看前几屏的内容，这样我们就可以只加载用户需要看的图片，减少服务器向用户浏览器发送图片文件所产生的负荷，下面通过三种方法给大家介绍js实现图片延时加载。
js实现图片延迟加载方法一：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>lazyImage2.html</title>
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="thisismypage">
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<!--<linkrel="stylesheet"type="text/css"href="./styles.css"mce_href="styles.css">-->
</head>
<bodystyle="text-align:center"mce_style="text-align:center">
<p> </p><p> </p><p> </p><p> </p><p> </p>
<divstyle="height:1290px;width:800px;border:1px;background:gray;"></div>
<divstyle="height:150px;width:800px;border:1px;background:green;"></div>
<imgclass="lazy"src="images/sprite.gif"mce_src="images/sprite.gif"alt="images/lazyloadImg.jpg"/>
<scripttype="text/javascript"><!--
vartemp=-1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了）
window.onscroll=function(){
varimgElements=document.getElementsByTagName("img");
varlazyImgArr=newArray();
varj=0;
for(vari=0;i<imgElements.length;i++){
if(imgElements[i].className=="lazy"){
lazyImgArr[j++]=imgElements[i];
}
}
varscrollHeight=document.body.scrollTop;//滚动的高度
varbodyHeight=document.body.offsetHeight;//body（页面）可见区域的总高度
if(temp<scrollHeight){//为true表示是向下滚动，否则是向上滚动，不需要执行动作。
for(vark=0;k<lazyImgArr.length;k++){
varimgTop=lazyImgArr[k].offsetTop;//1305（图片纵坐标）
if((imgTop-scrollHeight)<=bodyHeight){
lazyImgArr[k].src=lazyImgArr[k].alt;
lazyImgArr[k].className="notlazy"
}
}
temp=scrollHeight;
}
};
//--></script>
</body>
</html>
js实现网页图片延时加载方法二：
再没贴代码之前先给大家讲下js实现图片延时加载的原理。
实现原理：
把所有需要延时加载的图片改成如下的格式：
<imglazy_src="图片路径"border="0"/>
然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）：
JS代码：
lazyLoad=(function(){
varmap_element={};
varelement_obj=[];
vardownload_count=0;
varlast_offset=-1;
vardoc_body;
vardoc_element;
varlazy_load_tag;
functioninitVar(tags){
doc_body=document.body;
doc_element=document.compatMode=='BackCompat'?doc_body:document.documentElement;
lazy_load_tag=tags||["img","iframe"];
};
functioninitElementMap(){
varall_element=[];
//从所有相关元素中找出需要延时加载的元素
for(vari=0,
len=lazy_load_tag.length;i<len;i++){
varel=document.getElementsByTagName(lazy_load_tag[i]);
for(varj=0,
len2=el.length;j<len2;j++){
if(typeof(el[j])=="object"&&el[j].getAttribute("lazy_src")){
element_obj.push(all_element[key]);
}
}
}
for(vari=0,
len=element_obj.length;i<len;i++){
varo_img=element_obj[i];
vart_index=getAbsoluteTop(o_img);//得到图片相对document的距上距离
if(map_element[t_index]){
map_element[t_index].push(i);
}else{
//按距上距离保存一个队列
vart_array=[];
t_array[0]=i;
map_element[t_index]=t_array;
download_count++;//需要延时加载的图片数量
}
}
};
functioninitDownloadListen(){
if(!download_count)return;
varoffset=(window.MessageEvent&&!document.getBoxObjectFor)?doc_body.scrollTop:doc_element.scrollTop;
//可视化区域的offtset=document的高+
varvisio_offset=offset+doc_element.clientHeight;
if(last_offset==visio_offset){
setTimeout(initDownloadListen,200);
return;
}
last_offset=visio_offset;
varvisio_height=doc_element.clientHeight;
varimg_show_height=visio_height+offset;
for(varkeyinmap_element){
if(img_show_height>key){
vart_o=map_element[key];
varimg_vl=t_o.length;
for(varl=0;l<img_vl;l++){
element_obj[t_o[l]].src=element_obj[t_o[l]].getAttribute("lazy_src");
}
deletemap_element[key];
download_count--;
}
}
setTimeout(initDownloadListen,200);
};
functiongetAbsoluteTop(element){
if(arguments.length!=1||element==null){
returnnull;
}
varoffsetTop=element.offsetTop;
while(element=element.offsetParent){
offsetTop+=element.offsetTop;
}
returnoffsetTop;
}
functioninit(tags){
initVar(tags);
initElementMap();
initDownloadListen();
};
return{
init:init
}
})();
使用方法：把页面上需要延时加载的图片src改成为lazy_src，然后把上面的js放到body最后面，然后调用：lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。
另外：
如果你的页面上存在有内容切换的栏目的话，可能在切换时切换的内容里的图片可能会不显示，处理的方法是在内容时单独图片加载处理，如：
///切换内容的代码…
chlid.find("img[init_src]").each(function(){
$(this).attr("src",$(this).attr("init_src"));
$(this).removeAttr("init_src");
});
原生态js实现图片延时加载方法三：
<!doctypehtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>通过原生js延迟加载图片</title>
<styletype="text/css">
div{width:100px;height:100px;background:#F00;margin-bottom:30px}
</style>
</head>
<body>
<div><imgdata-url="http://www.pokemon.name/w/image/Sprites/PDW/001.png
"src="a.gif"/></div>
<div><imgdata-url="http://www.pokemon.name/w/image/Sprites/PDW/002.png
"src="a.gif"/></div>
<div><imgdata-url="http://www.pokemon.name/w/image/Sprites/PDW/003.png
"src="a.gif"/></div>
<div><imgdata-url="http://www.pokemon.name/w/image/Sprites/PDW/004.png
"src="a.gif"/></div>
</body>
//以上图片测试时可用复制多点
<scripttype="text/javascript">
(function(){
//common
functiontagName(tagName){
returndocument.getElementsByTagName(tagName);
}
function$(id){
returndocument.getElementById(id);
}
functionaddEvent(obj,type,func){
if(obj.addEventListener){
obj.addEventListener(type,func,false);
}elseif(obj.attachEvent){
obj.attachEvent('on'+type,func);
}
}
//这里可以按照需要配置些参数
varv={
eleGroup:null,
eleTop:null,
eleHeight:null,
screenHeight:null,
visibleHeight:null,
scrollHeight:null,
scrolloverHeight:null,
limitHeight:null
}
//对数据进行初始化
functioninit(element){
v.eleGroup=tagName(element)
screenHeight=document.documentElement.clientHeight;
scrolloverHeight=document.body.scrollTop;
for(vari=0,j=v.eleGroup.length;i<j;i++){
if(v.eleGroup[i].offsetTop<=screenHeight&&v.eleGroup[i].getAttribute('data-url')){
v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('data-url'));
v.eleGroup[i].removeAttribute('data-url')
}
}
}
functionlazyLoad(){
if(document.body.scrollTop==0){
limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight;
}else{
limitHeight=document.body.scrollTop+document.documentElement.clientHeight;
}
for(vari=0,j=v.eleGroup.length;i<j;i++){
if(v.eleGroup[i].offsetTop<=limitHeight&&v.eleGroup[i].getAttribute('data-url')){
v.eleGroup[i].src=v.eleGroup[i].getAttribute('data-url');
v.eleGroup[i].removeAttribute('data-url')
}
}
}
init('img')
addEvent(window,'scroll',lazyLoad);
})()
</script>
</html>
以上内容通过三种方法介绍了js实现图片延时加载，希望大家喜欢。