不断修改完善中……
/*!
* jquery.lazyoading.js
*自定义的页面图片延迟加载插件，比网上的jquery.lazyload简单，也更适合自己的网站
*使用方法：
把img 的class加上 lazyloading
然后先引用jquery，再引用jquery.lazyoading.js，再调用：$("img.lazyloading").lazyloading({loadfirst:true});
* by pukuimin
* 2013-11-01
*2013-11-08 解决了图片没有指定高度的问题
*2013-11-14 解决了没有指定高度加载图片之后有间隔的问题
*/
///
(function ($) {
$.fn.lazyloading = function (options) {
var defaults = {
preyimg: "/Content/images/Imgpreview/grey.gif",
picpath: "data-original",
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：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("");
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 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 查看效果：http://architecture.kinpan.com/
Original: https://www.cnblogs.com/riskyer/p/3424249.html
Author: you Richer
Title: 第一次自己写jquery图片延迟加载插件，不通用，但修改一下还是可以使用到很多页面上的
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/553324/
转载文章受原作者版权保护。转载请注明原作者出处！