jquery.lazyoading.js 自定义的页面图片延迟加载插件使用方法： 把img 的class加上 lazyloading,yc放图片的真实路径 然后先引用jquery，再引用jquery.lazyoading.js，再调用：$("img.lazyloading").lazyloading({loadfirst:true});
jquery.lazyoading.js
自定义的页面图片延迟加载插件
使用方法：
把img 的class加上 lazyloading,yc放图片的真实路径
然后先引用jquery，再引用jquery.lazyoading.js，再调用：$("img.lazyloading").lazyloading({loadfirst:true});
<script src="script/jquery.min.js" type="text/javascript"></script> <script src="script/jquery.lazyload.js" type="text/javascript"></script>
jquery.lazyloading.js的作用、加载过程、原理：
在页面加载完成之后，js初始化，把有data-original属性的图片再加一个<div></div>在外面，再创建一个隐藏的<img />标签，并且根据原图片的大小和位置计算loading图片的位置，把loading图片显示在中间；
判断window的scroll事件（滚动条变化），判断图片在不在可视区域内，如果在可视区域内，那么执行第4步，否则什么也不做。
判断图片的src与data-original是不是相同，如果不相同（说明还没有加载），执行第5步，否则什么也不做。
把图片的data-original赋值给隐藏的<img />标签的src，当隐藏的图片完全加载好之后（完成后会执行它的.load()事件），再把隐藏图片的src赋值给原图片的src(原因：保证loading图片消失后目标图片立即显示，如果一开始把data-original赋值给图片的src，那么还没加载完就会显示图片，网页中图片是一截一截显示的，非常难看).
HTML示例：
<div class="btm-clr"> <div class="icon"><a href="?id=262" target="_blank"><img class="lazyloading" src="/style/images/none.gif" yc="upload/2015/08/634252409544445000.jpg" /></a></div> <h3><a href="?id=262" target="_blank">55555555555</a></h3> </div> </div> <div class="bottom-grid"> <div class="btm-clr"> <div class="icon"><a href="?id=275" target="_blank"><img class="lazyloading" src="/style/images/none.gif" yc="upload/2015/08/634252394627726250.jpg" /></a></div> <h3><a href="?id=275" target="_blank">22222222</a></h3> </div> </div>
JS代码:
(function ($) {
$.fn.lazyloading = function (options) {
var defaults = {
preyimg: "/style/images/none.gif",
picpath: "yc",
container: $(window),
loadfirst: false, //进入页面后是否加载当前页面的图片
defaultHeightID: "lazyloadingHeight"//页面上默认高度的input标签id
//imgPaddingID: "lazyloadingPadding"//img的padding值
};
var params = $.extend({}, defaults, options || {});
params.cache = [];
$(this).each(function () {
var node = this.nodeName.toLowerCase(), url = $(this).attr(params["picpath"]), preyimg = params["preyimg"];
var defaultheight = $("#" + params["defaultHeightID"]).val(); //, padding = $("#" + params["imgPaddingID"]).val(); //
//重组
var data = {
obj: $(this),
tag: node,
url: url,
preyimg: preyimg,
defaultheight: defaultheight
};
params.cache.push(data);
});
var init = function () {
$.each(params.cache, function (i, data) {
var thisImg = data.obj, tag = data.tag, url = data.url, preyimg = data.preyimg;
if (typeof (url) != "undefined")// 判断是否需要延迟加载
{
var parent1 = thisImg.parent(); //a
var Inner = null; //
if (parent1.is("a") == true) {//img wrap by a
Inner = parent1;
}
else {
Inner = thisImg;
}
var width = thisImg.attr("width") || thisImg.css("width");
var height = data.defaultheight || thisImg.css("height");
//if (i == 0) alert(data.defaultheight);
var attrheight = thisImg.attr("height");
if (attrheight != null) height = attrheight;
if (width != null && width.indexOf("px") > -1) width.replace("px", "");
if (height != null && height.indexOf("px") > -1) height.replace("px", "");
var divstr = "<div class='.loading' style='text-align: left;position:relative;float:left;width:" + width + "px;";
var HasHeight = true; //图片是否指定了高度
divstr = divstr + "height:" + height + "px;";
if (attrheight == null || attrheight == "") {
HasHeight = false;
}
thisImg.css("position", "relative");
divstr = divstr + "' ></div>"
//修正外层div：text-align的影响
Inner.wrap(divstr);
//修正img外面不是a标签时parent()已经改变的问题
parent1 = thisImg.parent();
if (HasHeight == true) { parent1.attr("lazyloading_hasheight", "1"); } //是否指定了高度
else { { parent1.attr("lazyloading_hasheight", "0"); } }
parent1.append("<img class='loadhiddenimg' width='0' height='0' style='display:none;' src='' />");
thisImg.attr("src", preyimg);
thisImg.removeAttr("width").removeAttr("height");
thisImg.attr("width1", width).attr("height1", attrheight);
////thisImg.attr("width", "50px").attr("height", "50px"); //loading图大小
//thisImg.css("margin", "0 auto");
thisImg.css("margin", ((height / 2) - 25) + "px auto auto " + ((width / 2) - 25) + "px");
$(".lazyloading").css("display", "table"); //.css("position", "relative");
}
});
}
//动态显示数据
var loading1 = function () { };
var loading = function () {
//窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度
$.each(params.cache, function (i, data) {
var thisImg = data.obj, tag = data.tag, url = data.url, post, posb;
if (thisImg) {//对象不为空
if (typeof (url) != "undefined") {// 判断是否需要延迟加载
var PictureTop = parseInt(thisImg.offset().top);
//如果处理可见范围内，并且原图地址data-original不等于src,则加载图片
if (PictureTop >= thisTop && PictureTop <= thisButtomTop && thisImg.attr("data-original") != thisImg.attr("src")) {
var hiddenImg = thisImg.siblings("img.loadhiddenimg");
hiddenImg.load(function () { //隐藏图片加载完之后的回调函数
var width = thisImg.attr("width1");
var height = thisImg.attr("height1");
thisImg.attr("width", width).attr("height", height).removeAttr("width1").removeAttr("height1");
thisImg.css("margin", "0 auto");
if (thisImg.parent().attr("lazyloading_hasheight") == "0") {//没有指定高度时，加载图片后去掉div高度自适应
if (thisImg.parent().is("a") == true) {
thisImg.parent().parent().css("height", "");
}
else {
thisImg.parent().css("height", "");
}
}
thisImg.load(function () {
if (thisImg.parent().is("a") == true) {
thisImg.parent().parent().css("height", thisImg.height());
}
else {
thisImg.parent().css("height", thisImg.height());
}
});
thisImg.css('opacity', '0.2');
thisImg.attr("src", hiddenImg.attr("src"));
thisImg.animate({ opacity: 1.0 });
if (thisImg.attr("alt") != "") {
thisImg.attr("title", thisImg.attr("alt"));
thisImg.attr("alt", "");
}
}).error(function () {
thisImg.error(function () {
thisImg.css("margin", "0 auto auto 0");
if (thisImg.parent().attr("lazyloading_hasheight") == "0") {//没有指定高度时，加载图片后去掉div高度自适应
if (thisImg.parent().is("a") == true) {
thisImg.parent().parent().css("height", "");
}
else {
thisImg.parent().css("height", "");
}
}
});
thisImg.attr("src", hiddenImg.attr("src")); //alert("error");
if (thisImg.attr("alt") != "") {
thisImg.attr("title", thisImg.attr("alt"));
thisImg.attr("alt", "");
}
});
hiddenImg.attr("src", url);
}
}
}
});
};
//初始化
init();
//事件触发
//加载完毕即执行
if (params["loadfirst"] == true) loading();
//滚动执行
params.container.bind("scroll", loading).bind("resize", loading);
};
})(jQuery);调用：
<script type="text/javascript">
$(function () {
$("img.lazyloading").lazyloading({ loadfirst: true });
})
</script>加载等的图片：
默认空图片：
jquery.min.js-AND-jquery.lazyload.js：
下一篇：常用基本PHP语句二
评论列表
发表评论
热评文章
相关阅读
