分享每一天-图片太多加载过慢？学学图片懒加载吧

前端技术 1927 0 创建时间：2020-10-16 22:39:47

图片加载

#### 图片太多加载过慢？学学图片懒加载吧
我们在浏览图片较多的网页时，有没有想过这些图片是如何成功展示的呢？比如像这样的图片素材网站：
 
这样的网页拥有成千上万的图片资源，如何优化网页性能成为了开发人员不得不思考的技术问题。

不难发现，每当我们下拉网页的滚动条到底部时，可视部分的图片资源才开始解析，如此一来能够大大的减少服务器的压力，优化网页性能的同时也能提升用户体验。这样的技术也就是本实验想为大家介绍的——图片懒加载。

在开始学习图片懒加载之前，课程先会介绍图片预加载技术，通过这两种技术的学习做出对比，更能体现出懒加载是如何有效的提升页面性能的。本实验是基于 JQuery 编程语言来实现的，所以学员需要在实验开始前学习 JQuery 的基础知识。

#### 知识点
1. 不对加载资源做处理的图片相册
2. 图片加载之预加载技术
3. 预加载原理
4. 使用 JQuery 完成图片预加载
5. 图片加载之懒加载技术
6. 懒加载原理
7. 使用 JQuery 完成图片懒加载

#### 图片加载
网页中丰富的图片资源带给用户更好体验的同时，也降低了我们的性能，减慢了加载速度。如果不对图片资源做任何处理，就会出现当前的图片已经加载完，但是滑到下一张时图片未加载完成，呈现一种假死的状态，用户体验很不友好。

常用到的加载方式，分为两种：预加载和懒加载。

#### 预加载
预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

#### 为什么要使用预加载
在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白或没有变化，直到所有内容加载完毕
。

#### 使用预加载解决之前的问题

之前的图片相册我们并未对图片资源进行任何性能优化，导致出现当前的图片已经加载完，但是滑到下一张时呈现一种假死状态的问题，用户体验很不友好。

解决办法：让图片相册快速无缝隙的展示，在等待过程中显示正在加载的文字或者图片，等所有资源加载完成后再一次性展示。

#### 懒加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

#### 为什么使用懒加载
##### 1.提升用户体验
不妨设想下，用户打开像淘宝这样的长页面的时候，如果页面上所有的图片都使用预加载，因为图片数目较大而导致等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。

##### 2.减少无效资源的加载
如果我们只加载自己所看到的部分，这样能明显减少了服务器的压力，也能够减小浏览器的负担。

##### 3.防止并发加载的资源过多会阻塞 js 的加载
过多的资源加载会阻塞 JS 的加载以至于影响网站正常使用。