當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

WEB前端实现图片懒加载 echo.js

發(fā)布時間：2023/12/31 HTML 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 WEB前端实现图片懒加载 echo.js 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

echo.js是一個輕小的圖片懶加載js插件，在使用過程中很多朋友可能是直接自定義一張占位圖片，可能會造成圖片的變形等。其實(shí)這并不是最佳的解決方案。下面給大家介紹另一種方法，簡單的控制下css，實(shí)現(xiàn)loading效果?
首先我們準(zhǔn)備一張1*1px透明gif圖片(blank.gif)，和一個loading圖片。

Echo 是一個獨(dú)立的 JavaScript 懶加載圖像的工具，快速、體積小（不足1k）和使用 HTML5 的 data- 屬性。Echo 支持 IE8+ 。?
示例代碼

<body> <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg"> //blank.gif為預(yù)加載的照片，photo.jpg為最后顯示的照片<script src="dist/echo.js"></script> <script> Echo.init({ offset: 0, throttle: 250 //設(shè)置圖片延遲加載的時間 }); // Echo.render(); is also available for non-scroll callbacks </script> </body>

總結(jié)

以上是生活随笔為你收集整理的WEB前端实现图片懒加载 echo.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：如何将应用安装到/system/app下
下一篇： WEB前端基础知识汇总

HTML

WEB前端 实现图片懒加载 echo.js

總結(jié)

WEB前端实现图片懒加载 echo.js