溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
首先將插件在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標簽為
<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />
data-url表示將要異步加載的圖片，src表示首先加載的圖片（一般會是小圖片，或者是一個動畫，網頁中全部的src鏈接同一個圖片，這樣網頁就加載快好多，這個時候再異步的加載要加載的圖片，也就現在要說的功能）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
