随着网页内容越来越丰富，页面的图片也越来越多，导致页面加载越来越慢。针对页面的优化，图片加载是一个重点。常见的优化方案有图片预加载，图片惰性加载。或者针对图片格式做一些优化，例如使用webp之类的。这里主要关注图片的加载方式。
图片预加载
背景
图片的加载速度往往影响着网站整体的用户体验，尤其对于包含大量图片的网站。对图片进行预加载，不失为一个高效的解决方案。
解决方案
使用CSS3、JavaScript、Ajax实现图片预加载
具体实现
图片惰性加载
背景
页面图片较多，影响加载速度，而且很多时候，页面加载完了，用户却不会滑动到页面最下面，也就是说加载出来的图片，用户更本就没去看，造成资源浪费的同时也使得页面加载变慢。
解决方案
按需加载图片，如果用户滚动到图片位置，则加载图片。
实现原理
- 给
img标签设置src为一个loading图标，然后把实际的图片地址存储到其他自定义属性中； - 监听页面滚动事件，如果页面滚动到图片区域，则替换src为图片的视觉地址。
示例：
1 | <img data-original='actual.jpg' src='loading.gif'/> |
具体实现
- 参考教你实现图片的惰性加载
- 使用jQuery的惰性加载库（lazyload）, github地址