javascript - 美团网的图片延时加载是如何实现的？

Question

美团网的图片延时加载是如何实现的？
如下图所示：

图片加载前，（有一个默认图片）：

图片加载后：

Answer 1

1. 后台将图片src路径为默认图片占位地址。
2. 后台在图片的src属性中设置目标图片地址。
3. 在js中设定scroll事件，当图片出现在可视区时，将图片的src设为src的值并清除src属性。

页面原始html代码大致是这样

<img class="lazy-img img" width="366" height="220" src="http://s0.meituan.net/www/img/lazyloading-srcimg.png" src="http://p0.meituan.net/366.220/deal/__28717764__5569470.jpg" />

js处理后变成这样

<img class="lazy-img img" width="366" height="220" src="http://p0.meituan.net/366.220/deal/__24490837__4538655.jpg" id="yui_3_12_0_1_1391857370901_700" />

js代码在这个文件的scrollloader模块中。

Answer 2

楼主可以看看此文：http://stylechen.com/imglazyload2.html

Answer 3

jquery.lazyLoad