分享一个延迟加载图片的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
