懒加载，预加载

骑猪看日落 2022-05-14 10:14 329阅读 0赞

--------------------

### 一.懒加载 ###

> #### 1.what: ####
> 
> 延迟加载，一种很好的优化网页性能方式。可视区域外的东西不会加载，减少服务器的负载。适用图片很多，页面很长的电商网站。
> 
> #### 2.why: ####
> 
> 1.提升用户体验：因为一些图片较多的网站，如果一次性加载，用户看着白页面，等待时间一久，用户体验极差。  
> 2.减少无效资源的加载：有时候用户只需浏览到一部分，这样的话减少服务器的压力和流量，减少浏览器的负担。  
> 3. 防止并发加载的资源过多会阻塞js的加载。  
> 
> 
>   
> 原理：将页面上的图片src属性设置为空字符串，真实的图片路径存储在data-original属性中，当页面滚动的时候去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内将图片的src属性设置为data-original的值，这样就可以实现延迟加载。  
> 
> 
> #### 3.How: ####
> 
> 1.拿到所有的图片dom  
> 2.遍历每个图片判断当前图片是否到了可视区范围内  
> 3.如果到了就设置图片的src属性  
> 4.绑定window的scroll事件，对其进行事件监听。

代码：懒加载实现

因为`scroll`这样的事件浏览器在很短的时间内会触发很多次，为了提升页面性能，我们需要一个节流函数来控制函数的多次触发，一段时间内只执行一次回调。

### 二.预加载 ###

> #### 1.what： ####
> 
> 在使用图片之前就已经加载好，当需要查看时，直接从本地缓存中渲染。也就是提前加载
> 
> #### 2.why: ####
> 
> 图片预先加载到浏览器中，对要加载很多图片的网站来说，可以保证图片快速的渲染，提升用户体验。但是加重了浏览器的压力。
> 
> #### 3.how: ####
> 
> 1.使用css进行图片的预加载。  
> 原理：我们将之后要用的图片预先加载到不可见区域。在使用的时候，在设置它到可视区域就ok.  
> 2.使用Image对象  
> 3.使用XMLHttpReauest对象可以更加精细的控制预加载过程。

代码：

//1.使用css预加载：也可以直接设置display：none;
      body::after{
                content: "";
                display:block;
                position: absolute;
                background: url('./img1.jpg') no-repeat -10000px -1000px,
                            url('./img2.jpg') no-repeat -10000px -1000px,
                            url('./img3.jpg') no-repeat -10000px -1000px;
                width:0;
                height:0;
            }
     //2.使用img对象
         <script src="./imgs.js"></script>
         //imgs.js文件
         let image=new Image();
         image.src="wanmei.imgs.com"