图片延迟加载

最新推荐文章于 2025-09-11 10:42:34 发布

weixin_33725515

最新推荐文章于 2025-09-11 10:42:34 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/hust/archive/2011/05/08/2040502.html

本文介绍了一种通过延迟加载图片来优化网页性能的技术，通过给图片指定假的源地址并在用户滚动到图片位置时加载实际图片，以此减少页面加载时间并节省带宽。

有时我们看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。可以节省带宽，加块页面加载速度！

自己最近几天也在想着怎么实现这种功能，基本思路是给每个要延迟加载的图片一个假的src地址，然后给img标签字定义一个属性就叫dynamic吧，这个属性用了保存真实图片地址。当用户拖动滚动条时触发window.onscroll事件来检测哪些元素在用户的可视范围内，在可视范围并且还未加载的我们就加载它，嗯，基本原来就这样了。自己写了一个很基础的。

我觉得比较重要的就是如何判断我们要加载的图片是否浏览器可视范围内吧，我用的是getBoundingClientRect这个函数。比如我们判断元素a是否在可视范围内，

那么我们比较a.getBoundingClientRect().top是否小于浏览器的可视高度document.documentElement.clientHeight，并且a.getBoundingClientRect().left是否小于浏览器的可视宽度document.documentElement.clientWidth，差不多这样吧，比较复杂的以后遇到了在深入吧。

还有个优化性能的问题，一般情况下，触发程序会绑定到容器的scroll事件中。但很多时候scroll会被连续触发执行，大量连续的执行会占用很多资源。为了防止无意义的连续执行，程序设置了一个_delay方法来做延时：

原理是用一个lock属性，程序运行一次后lock设为true，并用一个setTimeout延时设置它为false。在锁定（lock为true）期间，程序不会立即执行，达到延时的效果。为了保证最后一次触发程序即使在锁定期间也能完成，用了一个timer来延时这次执行。

下面是代码：

var LazyLoader={
   imgs:[],
   delay:1000,
   lock :false,
   timer:null,
   loaded:0,
   init:function(){
     var img=document.getElementsByTagName('img');
	 for(var i=0,l=img.length;i<l;i++){
	    if(img[i].getAttribute('dynamic')){
		   this.imgs.push(img[i]);
		}
	 }
	 return this;
   },
   _delay: function() {
	clearTimeout(this.timer);
	var oThis = this, delay = this.delay;
	if ( this.lock ) {
		this.timer = setTimeout( function(){ oThis._delay(); }, delay );
	} else {
		this.lock = true; oThis.play();
		setTimeout( function(){ oThis.lock = false; }, delay );
	}
  },
   play:function(){
     if(this.isFinish()){
	   this.dispose();
	   return
	 };
      for(var i=0,l=this.imgs.length;i<l;i++){
	    if(this.imgs[i]&&isvisible(this.imgs[i])){
		   this.imgs[i].src=this.imgs[i].getAttribute('dynamic');
		   this.imgs[i].removeAttribute('dynamic','');
                   this.imgs[i]=null;
                   this.loaded++;
		}
	 } 
   }，
   isFinish: function() {
	return this.loaded>=this.imgs.length;
   },
   dispose: function() {
	clearTimeout(this.timer);
	this.imgs=null;
	window.onscroll=null;
  }
}
window.onload=function(){
   LazyLoader.init()._delay();
}
window.onscroll=function(){
  LazyLoader._delay();
}

function isvisible(img){
  return (img.getBoundingClientRect().top<document.documentElement.clientHeight)&&(img.getBoundingClientRect().left<document.documentElement.clientWidth);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>LazyLoader</title> <mce:style></mce:style><style _mce_bogus="1"></style> </head> <body> <div id="ok" style="position:fixed; left:50%; top:50%" _mce_style="position: fixed; left: 50%; top: 50%;"></div> <div class="test"><img dynamic="http://www.51pic.net/uploads/allimg/101110/00300153U-0.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif"/></div> <div class="test"><img dynamic="http://ww2.sinaimg.cn/bmiddle/6b6e567cjw1dgxaa1o6c8j.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://ww3.sinaimg.cn/bmiddle/620668e0jw1dgx55te44dj.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg?0.4891846855171025" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg?0.9650691456627101" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg?0.481967595173046" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg?0.2756234195549041" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://www.51pic.net/uploads/allimg/101110/00300153U-0.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif"/></div> <div class="test"><img dynamic="http://ww2.sinaimg.cn/bmiddle/6b6e567cjw1dgxaa1o6c8j.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://ww3.sinaimg.cn/bmiddle/620668e0jw1dgx55te44dj.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg?0.4891846855171025" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg?0.9650691456627101" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg?0.481967595173046" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg?0.2756234195549041" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://www.51pic.net/uploads/allimg/101110/00300153U-0.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif"/></div> <div class="test"><img dynamic="http://ww2.sinaimg.cn/bmiddle/6b6e567cjw1dgxaa1o6c8j.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://ww3.sinaimg.cn/bmiddle/620668e0jw1dgx55te44dj.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg?0.4891846855171025" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg?0.9650691456627101" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg?0.481967595173046" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg?0.2756234195549041" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://www.51pic.net/uploads/allimg/101110/00300153U-0.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif"/></div> <div class="test"><img dynamic="http://ww2.sinaimg.cn/bmiddle/6b6e567cjw1dgxaa1o6c8j.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://ww3.sinaimg.cn/bmiddle/620668e0jw1dgx55te44dj.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg?0.4891846855171025" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg?0.9650691456627101" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg?0.481967595173046" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg?0.2756234195549041" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://www.51pic.net/uploads/allimg/101110/00300153U-0.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif"/></div> <div class="test"><img dynamic="http://ww2.sinaimg.cn/bmiddle/6b6e567cjw1dgxaa1o6c8j.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://ww3.sinaimg.cn/bmiddle/620668e0jw1dgx55te44dj.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg?0.4891846855171025" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg?0.9650691456627101" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg?0.481967595173046" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg?0.2756234195549041" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://www.51pic.net/uploads/allimg/101110/00300153U-0.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif"/></div> <div class="test"><img dynamic="http://ww2.sinaimg.cn/bmiddle/6b6e567cjw1dgxaa1o6c8j.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://ww3.sinaimg.cn/bmiddle/620668e0jw1dgx55te44dj.jpg" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgam11er/143727/r_song1.jpg?0.4891846855171025" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg?0.9650691456627101" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_son11g3.jpg?0.481967595173046" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div class="test"><img dynamic="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.j11pg?0.2756234195549041" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" _mce_src="http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif" /></div> <div id="test"></div> <script type="text/javascript"><!-- var LazyLoader={ imgs:[], delay:1000, lock :false, timer:null, loaded:0, init:function(){ var img=document.getElementsByTagName('img'); for(var i=0,l=img.length;i<l;i++){ if(img[i].getAttribute('dynamic')){ this.imgs.push(img[i]); } } return this; }, _delay: function() { clearTimeout(this.timer); var oThis = this, delay = this.delay; if ( this.lock ) { this.timer = setTimeout( function(){ oThis._delay(); }, delay ); } else { this.lock = true; oThis.play(); setTimeout( function(){ oThis.lock = false; }, delay ); } }, play:function(){ if(this.isFinish()){ this.dispose(); return }; for(var i=0,l=this.imgs.length;i<l;i++){ if(this.imgs[i].getAttribute('dynamic')&&isvisible(this.imgs[i])){ this.imgs[i].src=this.imgs[i].getAttribute('dynamic'); this.imgs[i].removeAttribute('dynamic',''); this.loaded++; } } }, isFinish: function() { return this.loaded>=this.imgs.length; }, dispose: function() { clearTimeout(this.timer); this.imgs=null; window.onscroll=null; } } window.onload=function(){ LazyLoader.init()._delay(); } window.onscroll=function(){ LazyLoader._delay(); } function isvisible(img){ return (img.getBoundingClientRect().top<document.documentElement.clientHeight)&&(img.getBoundingClientRect().left<document.documentElement.clientWidth); } </script> </body> </html> <a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a>

转载于:https://www.cnblogs.com/hust/archive/2011/05/08/2040502.html