分享一个延迟加载图片的JS

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
    <script src="yanchi.js"></script>
    <script>
        $(function () {
            var yanchi = new YanChi();
            yanchi.init("img", 0);
            yanchi.range = 100;
            yanchi.callback(function (img, imgs) {
                img = $(img);
                if (img.data("src")) {
                    img.attr("src", img.data("src"));

                }
            });
        })
       
    </script>
</head>
<body>
    <p style="height:800px"></p><img src="" data-src="http://static.cnblogs.com/images/adminlogo.gif" /><p style="height:400px"></p>
</html>

1、初始化

最少提供一个参数

yanchi.init("img", 0); //img,提前0PX加载

yanchi.init("img", 100,"data-url");//所有图片，提前100 px加载，图片地址在data-url这个属性上

也可以这们初始化：

var yanchi = new YanChi();

yanchi.init("img");

yanchi.range=300;

yanchi.attrName="data-url";

只要设置了attrName属性,这样就可以用了

//////////////////////////////

如果你的图片地址在背景，或要设置图片CSS样式，上面的方法显然不行了，那样就无法满足你的要求了。

那么，就要自定义回调函数

拓展：定义回调

定义，滚动条到达的时候的事件

var yanchi = new YanChi();

yanchi.init("img");

yanchi.range=300;

yanchi.callback(function (img, imgs) {

if (img.data("background")) {
         img.css("background", img.data("background"));     
     }

}）

callback 这个函数注入了img,imgs两个变量。img是当前的图片

////////////////////////////////

随便写写的

如果lazyload无法满足你的需求，欢迎使用这个。兼容lazyload。

欢迎朋友们提出更好的建议~

下载https://files.cnblogs.com/files/hhkedang/yanchi.js

posted @ 2016-10-24 15:51 风乱发阅读(189) 评论(0) 收藏举报

刷新页面返回顶部