Echo.js纯JavaScript图片延时加载插件
Echo.js 是一个独立的 JavaScript 插件，轻量级、体积小压缩版本不足1k，使用 HTML5 的 data- 自定义属性定义真实的图片地址，通过插件实现图片的延时加载，有效缓解服务器压力和浏览效果。
Echo.js主要是针对图片的延时加载，当用户滑动到图片的位置，在加载这个图片，他会从服务器上加载真正的图片，用简单的方式替换src属性，这也是一个异步的过程。
使用Echo.js
使用Echo.js非常的简单，只需要准备一张Loading加载占位图，替换Src属性的值，然后在data-echo自定义属性中填写真实的URL地址，当用户浏览到这个位置的时候，首先会看到我们的Loading加载占位图，然后Echo.js会自动去服务器加载真实的图片。
<body>
<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>
</body>
初始化参数
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, use1000.
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 beginloading 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 beginloading 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 beginloading 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 tobegin 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 (ieload 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.