仿迅雷图片被动加载效果的实现

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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=gbk" />
<title>图片被动加载的实现</title>
</head>
<body>
<script type="text/javascript">
/**
 * Javascript Image Delay load
 * @author Eric,<wangyinglei@yeah.net>,QQ:31301678
 * @copyright Quanying Network Inc. 2010
 * @TODO	x轴滚动加载功能未被实现
 */
//闭包防止变量冲突
(function(){
	//预定义变量，减小代码体积
	var _ = document,
		A = _.compatMode,
		B = _.body,
		C = _.documentElement;
	//Constructor
	function AimoLoad(e){
		//要处理的包含延迟加载图片的容器
		this.area = e ?  this.get(e) : _;
		//需要延迟加载的所有图片对象
		this.imgs = [];
		//执行判断 条件成立 载入图片
		this.run();
	}
	//扩展原型链（注册类其他方法）
	AimoLoad.prototype = {
		//获取DOM元素，仅支持ID
		'get' : function(e){
			return typeof(e)=='string' ? _.getElementById(e) : e;
		},
		//获取所有需要被动载入的图片集合
		'getImages' : function(){
			var i = 0, 
				imgs = this.area.getElementsByTagName('img'),
				l = imgs.length;
			for ( ; i < l; i++) {
				//过滤带有bigsrc属性的所有图片
				if(imgs[i].getAttribute('bigsrc')){
					this.imgs.push(imgs[i]);
				}
			}
		},
		
		//获取元素位置坐标
		'getPosition' : function(el){
			var x = 0, y = 0;;
			if (el.getBoundingClientRect) {
				var box = el.getBoundingClientRect(),
					el = (A != "CSS1Compat") ? 
					_.body : C;
				x = box.left + el.scrollLeft - el.clientLeft;
				y = box.top + el.scrollTop - el.clientTop;
			} else {
				x = el.offsetLeft;
				y = el.offsetTop;
				var parent = el.offsetParent;
				while (parent) {
					x += parent.offsetLeft;
					y += parent.offsetTop;
					parent = parent.offsetParent;
				}
			}
			return {'x' : x, 'y' : y};
		},
		
		//封装判断变量是否定义
		'defined' : function(o){
			return (typeof(o)!="undefined");
		},
		
		//封装合法化Int变量
		'zeroFix' : function(n){
			return (!this.defined(n) || isNaN(n))? 0 : n;
		},
		//获取可视部分高度
		'getVisibileHeight' : function(){
			var cm = C && (!A || A=="CSS1Compat");
			if (!window.opera && cm) {
				return C.clientHeight;
			}else if (A && !window.opera && B) {
				return B.clientHeight;
			}
			return this.zeroFix(self.innerHeight);
		},
		//获取垂直滚动条位置
		'getScrollTop' : function(){
			if (C && this.defined(C.scrollTop) && C.scrollTop>0) {
				return C.scrollTop;
			}
			if (B && this.defined(B.scrollTop)) {
				return B.scrollTop;
			}
			return 0;
		},
		
		//执行主函数
		'run' : function(){
			//获取其他脚本注册到window上的onscroll和onresize事件，避免冲突
			var _resize = window.onresize || function(){}, 
				_scroll = window.onscroll || function(){},
				//引用自身，另存this指向
				_self = this,
				//定义注册函数
				delayLoad = function(){
					//清空前一次获取的所有图片
					_self.imgs = [];
					//获取当前未载入的图片
					_self.getImages();
					//如果已经没有被动载入的图片了，那么释放注册的事件，提高性能，节省内存
					if(_self.imgs.length==0){
						window.onscroll = function(){
							_scroll();
						};
						window.onresize = function(){
							_resize();
						};
						//alert('清除事件');
						return;
					}
					var i = 0,
						m = _self.imgs,
						l = _self.imgs.length,
						y = _self.getVisibileHeight(),
						t = _self.getScrollTop();
					//遍历所有需要被动载入的图片
					for( ; i < l; i++){
						//闭包保证i变量
						(function(i){
							
							//获取每个图像对象的坐标
							var pos = _self.getPosition(m[i]);
							//如果图片出现在可视区域内
							if(t + y > pos.y){
								//读取bigsrc属性，替换当前src属性
								m[i].setAttribute('src', m[i].getAttribute('bigsrc'));
								//删除bigsrc属性，提高性能
								m[i].removeAttribute('bigsrc');
							}
						})(i);//闭包结束
					}//循环结束
				};//定义注册函数结束
			
			//注册函数到window scroll事件
			window.onscroll = function(){
				_scroll();//执行其他脚本注册到当前事件的函数
				delayLoad();
			};
			//注册函数到window resize事件
			window.onresize = function(){
				_resize();//执行其他脚本注册到当前事件的函数
				delayLoad();
			};
		}
	}
	//暴露接口到外部，以便调用
	window.AimoLoad = AimoLoad;
})();
</script>
<div id="df" style="margin-top:1000px">
    <img src="//ku.shouce.ren/files/images/201601/56a34d54e0e6b.gif" width="200"  bigsrc="//ku.shouce.ren/files/images/201601/56a34a1c9caec.jpg" />
    <div style="height:300px;"></div>
    <img src="//ku.shouce.ren/files/images/201601/56a34d54e0e6b.gif" width="200"  bigsrc="//ku.shouce.ren/files/images/201601/56a34a1d31cfa.jpg" />
</div>
<script type="text/javascript">
new AimoLoad();
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

仿迅雷图片被动加载效果的实现

分类

图片代码

描述

Javascript实现的页面图片被动加载类，在使用前用1像素图像进行占位，并给img tag 添加自定义bigsrc属性，当有图片进入可视区域内时，载入图片，提高页面载入速度，节省不必要的流量和连接数，x轴滚动加载功能未被实现。主函数获取其他...