jquery html异步加载图片,jquery实现异步加载图片（懒加载图片一种方式）

jquery实现异步加载图片(懒加载图片一种方式)

发布时间：2020-08-26 08:45:03

来源：脚本之家

阅读：111

作者：专注前端30年

首先将插件在jq后面引入

(function($) {

// alert($.fn.scrollLoading);

$.fn.scrollLoading = function(options) {

var defaults = {

attr: "data-url"

};

var params = $.extend({}, defaults, options || {});

params.cache = [];

$(this).each(function() {

var node = this.nodeName.toLowerCase(),

url = $(this).attr(params["attr"]);

if(!url) {

return;

}

var data = {

obj: $(this),

tag: node,

url: url

};

params.cache.push(data);

});

var loading = function() {

var st = $(window).scrollTop(),

sth = st + $(window).height();

$.each(params.cache, function(i, data) {

var o = data.obj,

tag = data.tag,

url = data.url;

if(o) {

post = o.position().top;

posb = post + o.height();

if((post > st && post < sth) || (posb > st && posb < sth)) {

if(tag === "img") {

o.attr("src", url);

} else {

o.load(url);

}

data.obj = null;

}

}

});

return false;

};

loading();

$(window).bind("scroll", loading);

};

})(jQuery);

然后在底部初始化

$(document).ready(function () {

//实现图片慢慢浮现出来的效果

$("img").load(function () {

//图片默认隐藏

$(this).hide();

//使用fadeIn特效

$(this).fadeIn("5000");

});

// 异步加载图片，实现逐屏加载图片

$(".scrollLoading").scrollLoading();

});

需要修改img标签为

data-url表示将要异步加载的图片，src表示首先加载的图片(一般会是小图片，或者是一个动画，网页中全部的src链接同一个图片，这样网页就加载快好多，这个时候再异步的加载要加载的图片，也就现在要说的功能)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。