JavaScript图片延迟加载微型库Echo.js
2017-05-15 13:54:04  By: dwtedx

现在网络上的图片很多都是很大的、那么延迟加载就显得格外的重要了、Echo.js是一个标准的独立的Javascript图片懒加载(延迟加载)库、它非常小巧快速、只有2KB、它使用HTML5的 data-*属性、延迟请求加载图片资源、不依赖任意第三方插件库、特别适用于移动端需要加载大量图片的应用


1、引入文件

<script src="js/echo.min.js"></script>


2、HTML结构

<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">


blank.gif 是一个 1 x 1 的图片、用做默认图片、data-echo 的属性值是图片的真实地址、你可以给图片设置宽度和高度、或者在 CSS 中设置、否则似乎很底部很底部的图片才会延迟加载


3、JavaScript

echo.init({ 
    offset: 100, 
    throttle: 250, 
    unload: false, 
    callback: function (element, op) { 
        console.log(´loaded ok.´); 
    } 
});


4、常用参数及方法说明

参数 描述 默认值
offset 离可视区域多少像素的图片可以被加载 0
throttle 图片延迟多少毫秒加载 250
debounce 防抖动 true
unload 告诉echo是加载还是卸载视图中的图片,当图片离开视图区域时触发 false
callback 回调函数,用来检测图片是否加载 function()


最后echo.js还提供了一个.render()方法、用法如下

echo.render();


应用场景

当你的页面没有发生滚动、而你想加载即将要显示的图片、如图片轮播、当第一张图片显示完、接着滑动展示第二张图片、这个时候使用echo.render();提前加载第二张图片,就不会出现图片加载卡顿白屏等现象

图片延迟加载微型库Echo.js源代码下载链接: 图片延迟加载 密码: 7ade

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+