https://www.jianghan.gov.cn/material/scripts/jquery.autoimg.js

1// jQuery.autoIMG.js v0.3
2(function ($) {
3	var // 设置加载状态的替换图像
4		tempPath = '/material/images/loading.gif',
5		// 设置加载错误的替换图像
6		errorPath = '/material/images/error.gif',
7		// 检测是否支持css2.1 max-width属性
8		isMaxWidth = 'maxWidth' in document.documentElement.style,
9		// 检测是否IE7浏览器
10		isIE7 = !-[1,] && !('prototype' in Image) && isMaxWidth;
11		
12	new Image().src = tempPath;
13	
14	$.fn.autoIMG = function () {
15		var $this = this,
16			// 获取容器宽度
17			maxWidth = $this.width();
18			
19		return $this.find('img').each(function (i, img) {
20			
21			// 如果支持max-width属性则使用此，否则使用下面预加载方式
22			if (isMaxWidth) return img.style.maxWidth = maxWidth + 'px';
23			
24			var path = img.getAttribute('data-src') || img.src,
25				next = img.nextSibling,
26				parent = img.parentNode,
27				temp = new Image();
28			
29			// 删除img图像，并替换成loading图片
30			img.style.display = 'none';
31			img.removeAttribute('src');
32			img.parentNode.removeChild(img);
33			temp.src = tempPath;
34			next ? next.insertBefore(temp) : parent.appendChild(temp);
35			
36			// 图片尺寸就绪执行
37			imgReady(path, function (width, height) {
38				if (width > maxWidth) {
39					// 等比例缩放
40					height = maxWidth / width * height,
41					width = maxWidth;
42					
43					// 删除loading图像
44					temp.parentNode.removeChild(temp);
45					
46					// 恢复显示调整后的原图像
47					img.style.display = '';
48					img.style.width = width + 'px';
49					img.style.height = height + 'px';
50					img.setAttribute('src', path);
51					next ? next.insertBefore(img) : parent.appendChild(img);
52				};
53			}, function () {
54				// 加载错误
55				temp.src = errorPath;
56				temp.title = 'Image load error!';
57			});
58			
59		});
60	};
61	
62	// IE7缩放图片会失真，采用私有属性通过三次插值解决
63	isIE7 && (function (c,d,s) {s=d.createElement('style');d.getElementsByTagName('head')[0].appendChild(s);s.styleSheet&&(s.styleSheet.cssText+=c)||s.appendChild(d.createTextNode(c))})('img {-ms-interpolation-mode:bicubic}',document);
64
65	// 图片头数据加载就绪事件
66	// @param	{String}	图片路径
67	// @param	{Function}	获取尺寸的回调函数 (参数1接收width；参数2接收height)
68	// @param	{Function}	加载错误的回调函数 (可选)
69	(function () {
70		var list = [], intervalId = null,
71		
72		tick = function () {
73			var i = 0;
74			for (; i < list.length; i++) {
75				list[i].end ? list.splice(i--, 1) : list[i]();
76			};
77			!list.length && stop();
78		},
79		
80		stop = function () {
81			clearInterval(intervalId);
82			intervalId = null;
83		};
84		
85		this.imgReady = function (url, callback, error) {
86			var check, end, width, height, offsetWidth, offsetHeight, div,
87				accuracy = 1024,
88				doc = document,
89				container = doc.body || doc.getElementsByTagName('head')[0],
90				img = new Image();
91					
92			img.src = url;
93			if (!callback) return img;
94			
95			// 如果图片被缓存，则直接返回缓存数据
96			if (img.complete) return callback(img.width, img.height);
97			
98			// 向页面插入隐秘图像，用来监听图片是否占位
99			div = doc.createElement('div');
100			div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
101			div.appendChild(img)
102			container.appendChild(div);
103			width = img.offsetWidth;
104			height = img.offsetHeight;
105			
106			// 完全加载完毕的事件
107			img.onload = function () {
108				end();
109				callback(img.width, img.height);
110			};
111			
112			// 加载错误后的事件
113			img.onerror = function () {
114				end();
115				error && error();
116			};
117			
118			// 检测图片是否已经占位
119			check = function () {
120				offsetWidth = img.offsetWidth;
121				offsetHeight = img.offsetHeight;
122				if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > accuracy) {
123					end();
124					callback(offsetWidth, offsetHeight);
125				};
126			};
127			check.url = url;
128			
129			// 操作结束后进行清理
130			// 删除元素与事件，避免IE内存泄漏
131			end = function () {
132				check.end = true;
133				img.onload = img.onerror = null;
134				div.innerHTML = '';
135				div.parentNode.removeChild(div);
136			};
137			
138			// 将检测图片是否占位的函数加入定时器列队定期执行
139			// 同一图片只加入一个检测器

140			// 无论何时只允许出现一个定时器，减少浏览器性能损耗
141			!check.end && check();
142			for (var i = 0; i < list.length; i ++) {
143				if (list[i].url === url) return;
144			};
145			if (!check.end) {
146				list.push(check);
147				if (!intervalId) intervalId = setInterval(tick, 150);
148			};
149		};
150	})();
151
152})(jQuery);