所谓懒加载实际上非常简单，只是在正常的img标签里用data-src代替真正的src，这样可以让那些不用马上加载的图片，先显示为一个统一的加载图，然后监听滚轮的位置，当滚轮到达了预期的位置之后，就用js获取img标签的data-src然后填到src里，于是img标签就自动向后台求请这张图片的真正资源了，以实现一边拖动一边加载图片的效果。
<img src="loading.gif" data-src="真正的图片地址">
此功能一般用于同一个页面内有许多的图片要加载。由于一个页面同时向后台发送的请求是有数量限制的(一般浏览器是4到8个，IE67是2个)，所以如果页面上有很多CSS、JS、图片资源，就会出现要加载很久才能展示页面的情况，懒加载就能有效缓解此问题。
也由于以上原因，一直以来前端的解决方案除了上面所说的懒加载以外，还有不少：如CSS、JS的合并压缩；小图片都合到一张大图里用定位来显示; 以及用base64的格式转化图片等，都是通过减少请求数量的形式去解决问题的。此处用base64格式转化图片的方式能实现减少请求数量的效果是因为它会在HTML初始化时当成HTML的一部成被传输到客户端，所以是跟HTML同一个请求的，它有个问题是无法被浏览器缓存，所以只适用于不常用的图片，否则还是以正常的图片格式比较好，那可以利用浏览器的缓存，下次加载就不会那么慢了。
此处的缓存与html页面缓存不同<html manifest="demo.appcache">，此处的缓存是浏览器的自发性行为，而manifest的缓存机制是主动的针对整个页面的，用于实现离线应用。
manifest的值可以是绝对地址，也可以是相对地址，只要有这个属性，页面就会被缓存下来，与此同时，设置了manifest的页面，也就不用在后台的manifest文件里设置此页面为缓存了，但是同源下的缓存最大限制是5M。
后台的manifest文件实际上是一个简单的文本文件，它分三部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
例如：
CACHE MANIFEST
# 2018-06-01 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.html
FALLBACK:
/html5/ /404.html
当需要更新缓存时，只需修改此manifest文件就行，修改注释也会引起更新。
