预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。
<script type="text/javascript">
// 所有的图片
const imgs = [
"https://wx2.sinaimg.cn/mw690/62037b5agy1fow7y3pxpzj209n0b6aap.jpg",
"https://wx2.sinaimg.cn/mw690/62037b5agy1fow7y3slwej20gm0ha3zy.jpg",
"https://wx2.sinaimg.cn/mw690/62037b5agy1fow7y3slwej20gm0ha3zy.jpg",
];
let len = imgs.length;
/**
* 遍历imgs数组,有序将所有图片加载出来
* 可以通过控制台查看网络请求,会发现所有图片均按顺序加载
*/
let count = 0;
load();
function load() {
var imgObj = new Image();
imgObj.src = imgs[count];
imgObj.onerror = function () {
console.log(count);
if (count >= len) {
console.log('加载完毕');
} else {
load(); // 继续加载下一张
}
count++;
};
}
</script>