程序喵Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库，压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法，当图片元素进入窗口可视区域的时候，它就会改变图像的 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: 300, // 图片延迟多少毫秒加载
unload: false,
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
});
// echo.render(); 也可用于非滚动回调callback
</script>
</body>初始化参数
init()初始化函数支持一系列的参数，完整的参数列表
offset
类型: Number|String 默认: 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
类型: Number|String 默认: 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
类型: Number|String 默认: 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
类型: Number|String 默认: offsetVertical‘s value
The offsetTop option allows you to specify how far above the viewport you want Echo to beginloading your images.
offsetBottom
类型: Number|String 默认: offsetVertical‘s value
The offsetBottom option allows you to specify how far below the viewport you want Echo tobegin loading your images.
offsetLeft
类型: Number|String 默认: 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
类型: Number|String 默认: 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
类型: Number|String 默认: 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 默认 is 250 milliseconds.
debounce
类型: Boolean 默认: true
By 默认 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
类型: Boolean 默认: false
This option will tell echo to unload loaded images once they have scrolled beyond the viewport (including the offset area).
callback
类型: 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.
主页：https://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/
未经允许请勿转载：程序喵 » Echo.js – 纯JavaScript图片懒加载延迟加载插件教程