您好,登錄后才能下訂單哦!
首先將插件在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 () { //實(shí)現(xiàn)圖片慢慢浮現(xiàn)出來(lái)的效果 $("img").load(function () { //圖片默認(rèn)隱藏 $(this).hide(); //使用fadeIn特效 $(this).fadeIn("5000"); }); // 異步加載圖片,實(shí)現(xiàn)逐屏加載圖片 $(".scrollLoading").scrollLoading(); });
需要修改img標(biāo)簽為
<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />
data-url表示將要異步加載的圖片,src表示首先加載的圖片(一般會(huì)是小圖片,或者是一個(gè)動(dòng)畫,網(wǎng)頁(yè)中全部的src鏈接同一個(gè)圖片,這樣網(wǎng)頁(yè)就加載快好多,這個(gè)時(shí)候再異步的加載要加載的圖片,也就現(xiàn)在要說(shuō)的功能)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。