场景

当网站内具有大量图片资源时，一次性全部加载的话，会导致网页的排版不整齐。这时，预加载的方式就派上用场了，可以先加载一部分图片，剩下来的图片通过预加载的形式去加载，浏览到当前高度，再将预加载的图片插入进去，这样，网页的流畅程度以及美观程度得到较大的提升。

实现原理

  • 原来的图片位置放置一张资源较小的动态图片
  • 新建Image()变量image，设置image的src是要显示的图片，调用image.onload的回调函数，把原图片的地址替换掉

实例代码

1
2
3
4
5
6
7
window.onload=function(){
	let img1=new Image();
	img1.src="http://img.mukewang.com/53edad3e0001afad10000318.jpg";
	img1.onload=function(){
		$("#banner1").attr('src',"http://img.mukewang.com/53edad3e0001afad10000318.jpg"); 
	}
}