js 图片预加载

预加载目的

解决在网络环境比较差的情况下，图片加载缓慢的过渡状态

html

// data-img 自定义属性，用于保存图片真实路径，不影响图片显示
<img id="test" src=“本地占位图路径” data-img="图片真实网络路径">

js

// imgDom 为页面的 img 元素
function preloading (imgDom) {
	// 获取 img 元素的真实路径
	let url = imgDom.getAttribute('data-img');
	// 在 js 环境下创建一个新的 img DOM 对象，存储与内存中
	let img = new Image();
	// img 标签定义 src 属性，当前标签会直接发生图片请求
	// img.src = "图片真实网络路径";
	img.src = url;
	// onload 描述调用的对象装载完成，并不只存在于 window，所有 DOM 元素都有 onload 属性
	img.onload = function () {
		imgDom.src = url;
	}
}

window.onload = function () {
	preloading(document.getElementById('test');
}

以上是标签为 img 时的实现思路，如果标签为 div，span 等其他标签，需要将图片作为背景图，需要将代码中的 src 属性修改为 background-image 等等。