web前端图片预加载

是什么？

　　浏览器会缓存静态资源（hmtl/css/img等）。图片预加载就是让浏览器提前缓存图片，提升用户体验。

浏览器什么情况下会下载图片？

　　1，解析到html中img的src属性的时候

　　2，解析到background-image属性的url()的时候

　　3，在js中创建Image对象的之后给他的src属性赋上一个url之后浏览器就会发出请求。html中的img标签本质就是Image对象。html中每出现一个img标签，就有一个Image对象被创建。

 // html

 <img src="https://www.xxx.com/static/img/xxx.png" alt="">

 // css

 background:url('./src/static/images/goods1.png')

 // js 在js中创建Image对象后给它赋上src属性的时候浏览器也会下载src指向的资源。

 new Image().src = "https://www.xxx.com/static/img/xxx.png"

在哪里个阶段使用预加载？

　　反思：浏览器拿到一个HTML的时候第一件事情就是创建document对象然后解析HTML标签生成DOM树，当他解析到img标签的src属性的时候会立即向src指向的地址发出请求。这就代表我们定义在一个页面当中的img在页面初始的时候原本就会被统统下载。那我们为什么还要去自己下载这些图片？

　　结论：在index.html下载其他页面中需要用到的图片。

什么场景需要使用预加载？

　　像xx公司官方网站，这种展示类的页面中一般会有用于展示实力的比较大的轮播图和背景图。把这些图片提前下载下来，就能避免页面打开半天都是白茫茫的一片。

实现方式

　　实现预加载要做的只有一件事情，那就是在用到图片之前让浏览器提前缓存图片。

　　通过html：在index页面末尾定义多个img标签，达到提前下载的目的。

 // 批量定义要下载的图片资源，定义display 阻止他们渲染到页面
<img src="xxx.xxx.xxx/static/img/xx1.xxx" style="display: none">

 <img src="xxx.xxx.xxx/static/img/xx2.xxx" style="display: none">

 <img src="xxx.xxx.xxx/static/img/xx3.xxx" style="display: none">

　　通过css：在css文件中通过background-image属性批量下载图片

<div id="preload" style="display:none"></div>

#preload{
　　// url中的图片会依次次请求过来。

    background:url('./src/static/images/goods1.png');

    background:url('./src/static/images/goods2.png');

    background:url('./src/static/images/goods3.png');

}

　　通过js：批量创建Image对象，为它们的src属性赋上我们需要下载的图片URL

// 需要下载的URL列表

var imgList = ['./src/static/images/goods1.png'];

loadImg(imgList);

function loadImg(imgList){

　　imgList.map(function(imgSrc,index){

　　var img = new Image();

　　// 记录自己是第几个下载的图片

　　img.num = index+1;

　　console.log(img.num);

　　// 绑定加载完成事件处理函数

　　img.addEventListener("load",loadHandler);

　　// 这里为img指定src之后浏览器就会发出请求

　　img.src = imgSrc;

　　})

}

function loadHandler(e){

　　/*这里可以通过this拿到加载好的图片对象，可以对它为所欲为。*/

　　// 注销事件，释放内存。

　　this.removeEventListener("load",loadHandler);

　　// 判断是不是最后一个要加载的图片

　　if(this.num === imgList.length)console.log("加载完成！");

}

小结：

　　图片预加载的本质：让浏览器提前缓存之后要用到的图片。

　　好处：增强用户体验。

　　坏处：不管用不用的上都会吃用户流量，密集的下载会对服务器造成一定压力。