Echo.js 纯 JavaScript 图片延时加载插件

Question

Echo.js 是一个独立的 JavaScript 插件，轻量级、体积小压缩版本不足 1k，使用 HTML5 的 data- 自定义属性定义真实的图片地址，通过插件实现图片的延时加载，有效缓解服务器压力和浏览效果。

Echo.js 主要是针对图片的延时加载，当用户滑动到图片的位置，在加载这个图片，他会从服务器上加载真正的图片，用简单的方式替换src属性，这也是一个异步的过程。

使用 Echo.js

使用 Echo.js 非常的简单，只需要准备一张 Loading 加载占位图，替换 Src 属性的值，然后在 data-echo 自定义属性中填写真实的 URL 地址，当用户浏览到这个位置的时候，首先会看到我们的 Loading 加载占位图，然后 Echo.js 会自动去服务器加载真实的图片。

  <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
  <script src="dist/echo.js"></script>
  <script>
  echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
      console.log(element, 'has been', op + 'ed')
    }
  });
  // echo.render(); is also available for non-scroll callbacks
  </script>

初始化参数

init() 初始化函数支持一系列的参数，完整的参数列表

offset

Type: Number|String Default: 0

The offset option allows you to specify how far below, above, to the left, and to the right of the viewport you want Echo to begin loading your images. If you specify 0, Echo will load your image as soon as it is visible in the viewport, if you want to load 1000px below or above the viewport, use 1000.

offsetVertical

Type: Number|String Default: offset's value

The offsetVertical option allows you to specify how far above and below the viewport you want Echo to begin loading your images.

offsetHorizontal

Type: Number|String Default: offset's value

The offsetHorizontal option allows you to specify how far to the left and right of the viewport you want Echo to begin loading your images.

offsetTop

Type: Number|String Default: offsetVertical's value

The offsetTop option allows you to specify how far above the viewport you want Echo to begin loading your images.

offsetBottom

Type: Number|String Default: offsetVertical's value

The offsetBottom option allows you to specify how far below the viewport you want Echo to begin loading your images.

offsetLeft

Type: Number|String Default: offsetVertical's value

The offsetLeft option allows you to specify how far to left of the viewport you want Echo to begin loading your images.

offsetRight

Type: Number|String Default: offsetVertical's value

The offsetRight option allows you to specify how far to the right of the viewport you want Echo to begin loading your images.

throttle

Type: Number|String Default: 250

The throttle is managed by an internal function that prevents performance issues from continuous firing of window.onscroll events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is 250 milliseconds.

debounce

Type: Boolean Default: true

By default the throttling function is actually a debounce function so that the checking function is only triggered after a user stops scrolling. To use traditional throttling where it will only check the images every throttle milliseconds, set debounce to false.

unload

Type: Boolean Default: false

This option will tell echo to unload loaded images once they have scrolled beyond the viewport (including the offset area).

callback

Type: Function

The callback will be passed the element that has been updated and what the update operation was (ie load or unload). This can be useful if you want to add a class like loaded to the element. Or do some logging.

echo.init({
  callback: function(element, op) {
    if(op === 'load') {
      element.classList.add('loaded');
    } else {
      element.classList.remove('loaded');
    }
  }
});

.render()

Echo's callback render() can be used to make Echo poll your images when you're not scrolling, for instance if you've got a filter layout that swaps images but does not scroll, you need to call the internal functions without scrolling. Use render() for this:

echo.render();

Using render() is also throttled, which means you can bind it to an onresize event and it will be optimised for performance in the same way onscroll is.

相关链接

• 插件编写思想：http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/
• Github地址：https://github.com/toddmotto/echo/