图片预加载和懒加载

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

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

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

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

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

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

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

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

五、伪类，好比hover，在触发后才会加载

懒加载

好比咱们首屏有二十张图片，可是打开页面的时候只须要显示轮播图和第一张图片，那么另外的图片是否是能够在须要显示的轮播图和显示的第一张图片加载完成后慢慢去加载。这就是懒加载的原理。

懒加载方法

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

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

二、条件加载，一些图片是某些条件触发才显示的，也能够在显示页面的时候先不加 载，直到须要显示的时候去加载图片。

三、可视区域加载

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

预加载

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

预加载方法

一、使用css背景图片

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

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

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

三、用JavaScript建立图片

建立一个对象，就是new Image()，而后给这个对象赋值src，也可使用数组去实现须要加载不少图片的时候。

四、使用Ajax

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

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

欢迎关注Coding我的笔记 公众号