javascript图片预加载

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);
	};

};

 

 

 

你可能感兴趣的:(JavaScript)