Echo.js 图像延迟加载插件-BFW插件库

Echo.js 图像延迟加载插件

Echo.js 图像延迟加载插件,和 Lazy Load 一样，Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。

第一步引入bfwone

第二步use插件

第三步配置参数

参数	说明
offset	离可视区域多少像素的图片可以被加载
throttle	图片延迟多少毫秒加载

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["echo.min"], function() {
                Echo.init({
                    offset: 200,
                    throttle: 0
                });
            });
        });
    </script>
    <style>
        .demo img {
            width: 736px;
            height: 490px;
            background: url(http://repo.bfw.wiki/bfwrepo/images/loading.gif) 50% no-repeat;
        }
    </style>
</head>
<body>

    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js 往下滚动</h1>


    <div class="demo" style="width: 736px; margin: 0 auto;">
        <img class="lazy" src="http://www.bfw.wiki/static/Blog/image/bfwdemo.png" data-echo="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
        <img class="lazy" src="http://www.bfw.wiki/static/Blog/image/bfwdemo.png" data-echo="http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg">
        <img class="lazy" src="http://www.bfw.wiki/static/Blog/image/bfwdemo.png" data-echo="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg">
        <img class="lazy" src="http://www.bfw.wiki/static/Blog/image/bfwdemo.png" data-echo="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg">
        <img class="lazy" src="http://www.bfw.wiki/static/Blog/image/bfwdemo.png" data-echo="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
    </div>

</body>
</html>

Echo.js 图像延迟加载插件

网友评论0

lazyload.js

pjax.js

pullToRefresh.js

pace.js

visible.pkgd.min.js

persist.min.js

agent.min.js

echo.min.js

headBand.min.js

nprogress.js