JavaScript图片预加载技术范例

小提示

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 xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>图片预加载</title> 
<script> 
var imgReady = function (url, callback, error) {
	var width, height, intervalId, check, div,
		img = new Image(),
		body = document.body;
		
	img.src = url;
	
	// 从缓存中读取
	if (img.complete) {
		return callback(img.width, img.height);
	};
	
	// 通过占位提前获取图片头部数据
	if (body) {
		div = document.createElement('div');
		div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
		div.appendChild(img)
		body.appendChild(div);
		width = img.offsetWidth;
		height = img.offsetHeight;
		
		check = function () {
			if (img.offsetWidth !== width || img.offsetHeight !== height) {
				clearInterval(intervalId);
				callback(img.offsetWidth, img.clientHeight);
				img.onload = null;
				div.innerHTML = '';
				div.parentNode.removeChild(div);
			};
		};
		
		intervalId = setInterval(check, 150);
	};
	
	// 加载完毕后方式获取
	img.onload = function () {
		callback(img.width, img.height);
		img.onload = img.onerror = null;
		clearInterval(intervalId);
		body && img.parentNode.removeChild(img);
	};
	
	// 图片加载错误
	img.onerror = function () {
		error && error();
		clearInterval(intervalId);
		body && img.parentNode.removeChild(img);
	};
	
};
</script> 
<script> 
window.onload = function () {
var imgUrl = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg?',
	testReadyBtn = document.getElementById('testReadyBtn'),
	clsCacheBtn = document.getElementById('clsCacheBtn'),
	status = document.getElementById('status'),
	statusReady = document.getElementById('statusReady'),
	statusLoad = document.getElementById('statusLoad'),
	imgWrap = document.getElementById('imgWrap');
	
var imgLoad = function (url, callback) {
	var img = new Image();
 
	img.src = url;
	if (img.complete) {
		callback(img.width, img.height);
	} else {
		img.onload = function () {
			callback(img.width, img.height);
			img.onload = null;
		};
	};
 
};
 
testReadyBtn.onclick = function () {
	var that = this;
 
	that.disabled = true;
	status.style.display = 'block';
	statusLoad.innerHTML = statusReady.innerHTML = 'Loading...';
	imgWrap.innerHTML = '<img src="' + imgUrl + '" />';
	
	// 使用占位方式快速获取大小
	imgReady(imgUrl, function (width, height) {
		statusReady.innerHTML = 'width:' + width + '; height:' + height;
	}, function () {
		statusReady.innerHTML = 'Img Error!';
	});
	
	// 使用传统方式获取大小
	imgLoad(imgUrl, function (width, height) {
		statusLoad.innerHTML = 'width:' + width + '; height:' + height;
		that.disabled = false;
	}, function () {
		statusLoad.innerHTML = 'Img Error!';
		that.disabled = false;
	});
	
};
 
clsCacheBtn.onclick = function () {
	imgUrl += new Date().getTime();
	status.style.display = 'none';
	imgWrap.innerHTML = '';
};
 
};
</script> 
</head>
<body> 
<p><button id="testReadyBtn">开始加载图片</button> <button id="clsCacheBtn">清空缓存</button>(如果图片加载过后，浏览器会缓存)</p> 
<div id="status" style="display:none"> 
	<p><strong>imgReady:</strong><p> 
	<p id="statusReady"></p> 
	<p><strong>imgLoad:</strong></p> 
	<p id="statusLoad"><p> 
</div> 
</body> 
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript图片预加载技术范例

分类

图片代码

描述

JavaScript图片预加载技术范例，如lightbox方式展现照片，无疑需要提前获得大图的尺寸，这样才能居中定位，由于javascript无法获取img文件头数据，必须等待其加载完毕后才能获取真实的大小然后展示出来，所以lightbox显示的图片的速度体...