图片的懒加载与预加载

懒加载

懒加载：也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。
懒加载的实现原理是：将页面上图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。

预加载

预加载：指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间，提高用户的体验。
预加载的实现：最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。

图片格式

目前主要的图片分类有JPEG/JPG、PNG、WebP、Base64、SVG

1、JPEG/JPG

关键词：有损压缩、体积小、加载快、不支持透明

JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。

当在处理颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显。且JPEG不支持透明图片。

2、PNG-8 与 PNG-24

关键字：无损压缩、质量高、体积大、支持透明

PNG是一种无损压缩的高保真的图片格式。跟JPG相比，有更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。唯一的缺点就是体积有点大。

主要使用场景：主要用来处理小logo、背景图等。

3、SVG
关键字：文本文件、体积小、不失真、兼容性好

SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述

SVG 与 PNG 和 JPG 相比，文件体积更小，可压缩性更强。

SVG，作为矢量图，它最显著的优势还是在于图片可无限放大而不失真这一点上。

SVG 是文本文件。既可以像写代码一样定义 SVG，写在 HTML 里、成为 DOM 的一部分，也可以把对图形的描述写入以 .svg 为后缀的独立文件（SVG 文件在使用上与普通图片文件无异）。这使得 SVG 文件可以被非常多的工具读取和修改，具有较强的灵活性。

SVG 的局限性主要有两个方面，一方面是它的渲染成本比较高，这点对性能来说是很不利的。另一方面，SVG 存在着其它图片格式所没有的学习成本（它是可编程的）。

4、Base64
作为雪碧图的补充而存在。雪碧图主要是将很多小图合并到一张透明背景上再结合css定位显示特定部分减少网络请求的一种优化方式。
base64把图片进行编码可以将结果写入到html和css中从而减少网络请求。base64编码之后图片会膨胀至原来的40%。

其他文章

图片加载：加载中显示loading，加载成功显示正常图片，加载失败显示默认图片。

图片加载：加载中显示loading，加载成功显示成功图片，加载失败显示自定义内容，可点击重新请求图片