javascript图片预加载

最新推荐文章于 2023-10-20 15:25:51 发布

原创最新推荐文章于 2023-10-20 15:25:51 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

javascript 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种利用JavaScript异步获取图片真实尺寸的方法。该方法适用于需要预加载图片或在图片加载完成前进行布局调整的场景。通过创建不可见的DOM元素来提前解析图片，并监听其尺寸变化，确保页面布局的准确性和用户体验。

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

};