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