图片延迟加载方案

图片延迟加载的原理是什么？

图片延迟加载的原理就是先不设置img的src属性，等合适的时机（比如滚动、滑动等）再把图片真实url放到img的src属性上。
过多的图片会严重影响网页的加载速度，移动网络下的流量消耗巨大，延迟加载几乎是标配。

图片延迟加载的使用场景有哪些？

1. 好奇心日报首页和列表页都有很多固定宽高的图片。
2. 好奇心日报文章详情页的图片，这些图片需要自适应宽度且保持宽高比（防止页面抖动）。

固定宽高延迟加载

这个比较简单，设置好固定宽高，直接使用最简单的延迟加载即可
淘宝mobile首页的延迟加载有个点做得特别好，滚动结束后只加载当前视窗可见的图片，不会加载滚动超过视窗的图片，也不会加载还没滚动到的视窗图片。

非固定宽高的延迟加载

目前大概有两种方案，各有优劣，具体看情况使用：
第一种方案使用padding-top或者padding-bottom来实现固定宽高比。优点是纯css方案，缺点是html冗余，对输出到第三方不友好

第二种方案在页面初始化阶段利用ratio设置实际宽高值，优点是html干净，对输出到第三方友好，缺点是依赖js，理论上会至少抖动一次

更进一步结合srcset

除了上面说的延迟加载，我们可以更进一步的引入srcset，通过设置srcset来保证加载最匹配的图片，这样对于一倍屏，二倍屏，三倍屏来说，可以做到不浪费流量且效果最好。

都有哪些延迟加载开源方案？

jquery_lazyload

依赖于jquery

// 初始化
$("img.lazy").lazyload();

lazysizes 推荐

原生js，不依赖于jquery/zepto
自动监测可能发生变化的lazyload节点，不需要额外初始化
支持响应式图片srcset
性能高，改善SEO

// 引入js文件


// 非响应式 例子

// 响应式 例子，自动计算合适的图片

// iframe 例子

lazyload

依赖jquery/zepto

$(".lazy").lazyload();

微信如何实现延迟加载？

研究了微信延迟加载的代码，还解决了一个问题，那就是常见于移动端的自适应宽度的延迟加载，即根据情况具体计算宽高。

// 源码


// 解析后的代码


/* 其中
data-s：表示可选的图片尺寸大小
data-type：表示图片类型
data-src：表示图片链接
data-ratio：表示长宽比
*/

由于源码是压缩模式的，做简单的猜测如下：

1. 对于延迟加载，微信采用的模式和正常的延迟加载的模式类似，即用data-src存储真实的图片链接
2. 为了解决移动端的自适应宽度的问题，微信存储了长宽比，然后进入页面就计算在不同设备里的真实宽高，并设置在style

其他问题？

1. 接入第三方平台的网页怎么处理？
   由于好奇心日报的文章会输出到第三方平台，比如今日头条/一点资讯等平台，这些平台对html都有一定的规范。这时候就需要后台在输出之前对html做一些转换。
   为了简单起见，类似
   的方案不太适合让后台转换，所以微信这种动态计算方法可以借鉴。
2. 怎么处理响应式图片？
   响应式图片能够根据当前屏幕分辨率加载最匹配的图片，能够因地制宜，详见图片响应式解决方案
3. 方案有了，回头追加一篇具体实践踩坑的博文