airbnb 的 lazyload?

火爆浪子
  • 2.8k

https://www.airbnb.com/s/expe...

我在網路查都沒有相關的資源
請問有人可以解析他怎麼寫的嗎?
就是圖片還沒有加載完會先有一個模糊圖,再fadeIn原圖。很神奇,我知道叫 lazyload,但沒有找到一樣類似效果的套裝....

回复
阅读 1.4k
1 个回答
✓ 已被采纳

lazy load 的标签一般这么写<img src="" data-url="imgurl" />
它的的原理就是检测图片位置是否即将进入视窗内
即将进入时用 JavaScript 把data-url 的链接搬到 src,这个时候浏览器就会加载图片

至于有的图片可以从模糊到清晰,可以参考渐进式 jpeg
https://cloudinary.com/blog/p...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏