图片预加载和懒加载

对于前端性能来说，图片是一个过不去的坎，又想能页面美观，又想页面响应速度快，那么这时候就有了两个技术，图片懒加载和预加载。在这边我只介绍一些方法和原理，不具体把方法的代码贴出来。

懒加载：在需要显示图片的时候才去加载图片。

预加载：在还没显示的时候就加载图片。

在说预加载和懒加载之前。我们先说说图片加载的时机。

1、设置了display: none的img标签和元素背景图片，不会渲染但是会加载。

2、父元素div设置了display: none，那么这个父元素里面的子元素img标签会加 载,父元素里面子元素背景图片不会加载

3、重复或者加载过的图片只会加载一次

4、不存在元素的背景图片不会加载

5、伪类，比如hover，在触发后才会加载

懒加载

比如我们首屏有二十张图片，但是打开页面的时候只需要显示轮播图和第一张图片，那么另外的图片是不是可以在需要显示的轮播图和显示的第一张图片加载完成后慢慢去加载。这就是懒加载的原理。

懒加载方法

1、使用定时器或者计时器

在打开页面需要显示的图片我们优先加载，然后写一个定时器或者计时器去请求之后需要用到的图片。

2、条件加载，一些图片是某些条件触发才显示的，也可以在显示页面的时候先不加 载，直到需要显示的时候去加载图片。

3、可视区域加载

说白了就是监听滚动条，滚动条滚动到一定位置的时候就去加载马上要显示的图片，要稍微提前一点去加载。

预加载

虽然页面还不需要显示图片，但是我们已经把这些图片加载下来了，只是不显示这些图片，我们都知道浏览器是会缓存请求过的图片，预加载就是基于这个原理。

预加载方法

1、使用css背景图片

我们写一些样式，然后把图片的地址放到背景图片里面，让图片隐藏，也可以设置背景图片位置偏移出这个页面。浏览器解析到这些样式的时候就会去加载这些图片，然后等你需要显示的时候浏览器会从缓存里面取，就不需要再去请求。但是这个会造成解析过程中增加了解析时间。

2、使用JavaScript配合css背景图片

原理就是在DOM和CSS都加载完了，就是在ready方法里面给这些样式添加背景图片，这样就不会造成解析时间边长的问题。

3、用JavaScript创建图片

创建一个对象，就是new Image()，然后给这个对象赋值src，也可以使用数组去实现需要加载很多图片的时候。

4、使用Ajax

就是发起一个get请求，地址是这张图片，因为请求后浏览器会缓存，这张图片就预加载到了本地。

其实懒加载和预加载都是需要看需要决定的，比如需要几十张图片显示，但是有优先顺序，就使用懒加载，如果是只有几张小图，页面渲染速度也够快，想要交互的时候响应快速，使用预加载。

欢迎关注Coding个人笔记 公众号