开发者社区> 问答> 正文

美团网的图片延时加载是如何实现的?

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

图片加载前,(有一个默认图片):
screenshot
screenshot

展开
收起
a123456678 2016-03-25 14:37:28 2437 0
1 条回答
写回答
取消 提交回答
  • 后台将图片src路径为默认图片占位地址。
    后台在图片的data-src属性中设置目标图片地址。
    在js中设定scroll事件,当图片出现在可视区时,将图片的src设为data-src的值并清除data-src属性。
    页面原始html代码大致是这样

    <img class="lazy-img img" width="366" height="220" src="http://s0.meituan.net/www/img/lazyloading-srcimg.png" data-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模块中。

    2019-07-17 19:14:20
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
JAVA反射原理以及一些常见的应用 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载