echo.js 轻量级的js中的图片懒加载插件

最新推荐文章于 2025-06-10 13:28:14 发布

原创最新推荐文章于 2025-06-10 13:28:14 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片 #解决方案 #插件 #位图

JS和Jquery相关知识专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何利用echo.js这个轻量级的js插件进行图片懒加载，避免了图片变形的问题。通过控制CSS和使用1*1px的透明gif图片以及loading图片，实现了更优的加载体验。echo.js具有体积小、速度快且支持IE8+等特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echo.js是一个轻小的图片懒加载js插件，在使用过程中很多朋友可能是直接自定义一张占位图片，可能会造成图片的变形等。其实这并不是最佳的解决方案。下面给大家介绍另一种方法，简单的控制下css，实现loading效果
首先我们准备一张1*1px透明gif图片(blank.gif)，和一个loading图片。

<img class="loading" src="blank.gif" data-echo="图片真实路径" />

Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 HTML5 的 data- 属性。Echo 支持 IE8+ 。
示例代码

<body> 
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
//blank.gif为预加载的照片，photo.jpg为最后显示的照片
  <script src="dist/echo.js"></script> 
  <script> 
  Echo.init({ 
    offset: 0, 
    throttle: 250  //设置图片延迟加载的时间 
  }); 
  // Echo.render(); is also available for non-scroll callbacks 
  </script> 
</body>