图片加载优化

懒加载

<img class="J_imgLazyload" src="//img14.360buyimg.com/cms/g10/M00/13/04/rBEQWFFj4PUIAAAAAAAESxyqJLUAADvdAIHC9oAAARj186.gif" original="//img11.360buyimg.com/cms/jfs/t12118/41/1394617476/43413/2253395a/5a1f7569N63f38100.jpg" />

1. 加载10*10的站位图
2. 监听滚动时间（记得节流)
3. 遍历当前页面需要进行懒加载的图片,当图片出现在可视区域时加载original原图

预加载

1. 获取用户屏幕大小，加载当前屏幕及上下一屏幕
2. 监听滚动，获取上下一屏幕的内容，并进行预加载

知乎：先加载占位图-》在加载模糊图-》原图

1. 加载占位图 <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='403' height='372'></svg>" alt="" srcset="">
2. 加载模糊图
3. 加载原图

gif处理

先用静态图站位，点击后用视屏播放git,也就是播放mp4