前端项目分析：我是如何做图片优化的（预加载和懒加载）

    前端页面上的图片优化可真是最重要也是最令人头疼的部分，我是花费了几个月的时间才优化到令我满意的一半的程度，，，唉，一言难尽啊！

图片的优化有两种方式： 预加载 和 懒加载

    先说说 预加载 ：我以前写过关于预加载的博客，但是吧，，，里面很多内容不是让我很满意，因为后期发现有些内容在特定情况下才能显现出作用。

预加载的常用场景：在开发的过程，我们经常会遇到这样的要求，当鼠标hover上去的时候，更改菜单的背景。如果没有进行图片预加载的话，会出现闪烁。那么拥有1px的眼睛的设计师们不会放过你的。为什么会出现这张情况？因为hover的时候，图片才会去加载。

试验了很多场景，发现正如我上面所说，预加载其实更适合如hover变换后的图片加载（解决闪屏问题），在网页刚打开的那个图片环境要求下其实作用真不如懒加载。

思量再三，我决定 “投靠” 懒加载 大军！

何为 “懒加载”？

    在图片由于某些原因没有显示出来时，用一个占位符去显示，这是提高用户体验的不错方式，目前，京东等商城网站上就用了此技术。

懒加载的精髓：不要将真正图片放在src中引入，src中放“占位图”！

为什么使用懒加载：
    在一个页面中，假设有20张图片，每张为100kb，用户在不点滚动条的时候看到的只有4张，如果这20张图片都设置了真正的src，那么当页面首次加载的时候浏览器会立即请求这20张图片资源，需要2000kb的流量；
但是我们做懒加载只请求用户看到的4张图片的话，浏览器只请求这4张图片资源，需要的流量只有400kb。这种手段可以大大减少首屏时间。

因为是手机编写，所以代码及一些语言可能不那么到位，有兴趣的朋友可以到我CSDN博客观看： https://blog.csdn.net/qq_43624878/article/details/95226831?utm_source=app