另类的JS图片加载技术演示代码

小提示

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>
<html>
<head>
<meta charset="UTF-8">
<title>JS图片加载技术演示代码</title>
<style type="text/css"> 
img {border:1px solid #ccc; background:#fff url(//ku.shouce.ren/files/images/201601/56a34ae2cd511.gif) no-repeat center center;}
</style>
</head>
<body>
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?0" /><br />
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?1" /><br />
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?2" /><br />
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?3" /><br />
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?4" /><br />
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?5" /><br />
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?6" /><br />
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?7" /><br />
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?8" /><br />
<img src="blank.gif" width="120" height="120" path="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg?9" /><br />
<script type="text/javascript">
var ImgLoadManager = (function() {
	var storedInstance = null;
	
	var ImgLoad = function() {
		this.imgs = document.getElementsByTagName('img');
	};
	
	ImgLoad.prototype = {
		getPageSize: function() {
			var winH;
			if(window.innerHeight) {
				winH = window.innerHeight;
			}
			else if(document.documentElement && document.documentElement.clientHeight) {
				winH = document.documentElement.clientHeight;
			}
			else if(document.body) {
				winH = document.body.clientHeight;
			};
			return {WinH: winH};
		},
		
		getPageScroll: function() {
			var y;
			if(window.pageYOffset) {
				y = window.pageYOffset;
			}
			else if(document.documentElement && document.documentElement.scrollTop) {
				y = document.documentElement.scrollTop;
			}
			else if(document.body) {
				y = document.body.scrollTop;
			};
			return {Y: y};
		},
		
		getOffsetTop: function(el) {
			var t = el.offsetTop;
			while(el = el.offsetParent) {
				t += el.offsetTop;
			};
			return t;
		},
		
		addEvent: function(el, type, fn) {
			if(window.addEventListener) {
				el.addEventListener(type, fn, false);
			}
			else if(window.attachEvent) {
				el.attachEvent('on' + type, fn);
			}
			else {
				el['on' + type] = fn;
			};
		},
		
		removeEvent: function(el, type, fn) {
			if(window.removeEventListener) {
				el.removeEventListener(type, fn, false);
			}
			else if(window.detachEvent) {
				el.detachEvent('on' + type, fn);
			}
			else {
				el['on' + type] = null;
			};
		},
		
		bubbleSort: function(array) {
			var i = 0, len = array.length, j, d;
			for(; i < len; i++) {
				for(j = 0; j < len; j++) {
					if(array[i] < array[j]) {
						d = array[j];
						array[j] = array[i];
						array[i] = d;
					};
				};
			};
			return array;
		},
		
		resize: function() {
			this.pageHeight = this.getPageSize().WinH;
		},
		
		setOpacity: function(el, val) {
			var browserName=navigator.userAgent.toLowerCase();
			if(/msie/i.test(browserName) && !/opera/.test(browserName)) {
				el.style.filter = 'alpha(opacity='+ (val * 100) +')';
			}
			else {
				el.style.opacity = val;
			};
		},
		
		init: function() {
			this.json = {};
			this.sort = [];
			this.pageHeight = this.getPageSize().WinH;
			if(this.imgs != null) {
				for(var i = 0, len = this.imgs.length; i < len; i++) {
					var img = this.imgs[i];
					var oImg = {
						'img': img,
						'path': img.getAttribute('path'),
						'offsetTop': this.getOffsetTop(img)
					};
					img.removeAttribute('path');
					this.sort.push(oImg.offsetTop);
					this.json[oImg.offsetTop] = oImg;
				};
				this.sort = this.bubbleSort(this.sort);
			};
		},
		
		animate: function(el) {
			var that = this;
			var opacity = 0.1;
			setTimeout(function() {
				opacity += 0.1;
				that.setOpacity(el, opacity);
				if(opacity < 1) {
					setTimeout(arguments.callee, 100);
				};
			}, 100);
		},
		
		startLoad: function() {
			var that = this;
			var img = [];  //存储 Image 对象
			var aImg = [];  // 存储 dom 图片
			var num = 0;  // 存储已经加载的图片数量
			if(this.sort.length !== 0) {
				for(var i = 0; i < this.sort.length; i++) {
					if(this.sort[i] < (this.pageHeight + this.getPageScroll().Y)) {
						num++;
						img[i] = new Image();
						aImg[i] = this.json[this.sort[i]].img;
						img[i].src = this.json[this.sort[i]].path;
						if(img[i].complete) {
							aImg[i].src = img[i].src;
						}
						else {
							img[i].onload = function(key) {
								return function() {
									aImg[key].style.background = '#fff';
									that.setOpacity(aImg[key], 0.1);
									aImg[key].src = this.src;
									that.animate(aImg[key]);
									
								}
							}(i);
						};
					} else {
						break;
					};
				};
				
				if(num > 0) {
					for(var i = num; i > 0; i--) {
						this.sort.splice(i-1, 1);
					};
					num = 0;
				};
			} else {
				this.removeEvent(window, 'scroll', function() {
					this.startLoad();
				});
				this.imgs = null;
				this.pageWidth = null;
				this.pageHeight = null;
				this.json = null;
				return;
			};
			
		}
	};
	
	return {
		
		appImgLoad: function() {
			// 生成实例
			var tt = this.getImgLoad();
			// 初始化
			tt.init();
			// 页面加载 1 秒后再加载出现在视图中的图片
			tt.addEvent(window, 'load', function() {
				setTimeout(function() {
					tt.startLoad();
				}, 1000);
			});
			// 拖动滚动条，加载图片
			tt.addEvent(window, 'scroll', function() {
				tt.startLoad();
			});
			// 当浏览器大小改变时，重新获取浏览器视图尺寸
			tt.addEvent(window, 'resize', function() {
				tt.resize();
			});
		},
		
		getImgLoad: function() {
			if(storedInstance == null) {
				storedInstance = new ImgLoad();
			};
			return storedInstance;
		}
	};
	
})();

ImgLoadManager.appImgLoad();
</script>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

另类的JS图片加载技术演示代码

分类

图片代码

描述

发一款比较另类的JS图片加载技术演示代码，其实也不另类了，网上已经有这样的效果了，也就是图片在加载的时候不是一下子加载完，而是随着网页滚动条的滚动，即时加载，这样可以节省资源，让网页在初始状态的打开速度非常快，避免了用户等...