jQuery的圖片懶載入程式碼
js程式碼
<script src="js/jquery.min.js"></script>
<script>
var _content = []; //暫時儲存li循環內容
var moreload = {
_default:10, //預設顯示圖片個數
_loading:5, //每次點選按鈕後載入的個數
init:function(){
var lis = $(".moreload .hidden li");
$(".moreload ul.list").html("");
for(var n=0;n<moreload._default;n++){
lis.eq(n).appendTo(".moreload ul.list");
}
$(".moreload ul.list img").each(function(){
$(this).attr('src',$(this).attr('realSrc'));
})
for(var i=moreload._default;i<lis.length;i++){
_content.push(lis.eq(i));
}
$(".moreload .hidden").html("");
},
loadMore:function(){
var mLis = $(".moreload ul.list li").length;
for(var i =0;i<moreload._loading;i++){
var target = _content.shift();
if(!target){
$('.moreload .more').html("<p>全部載入完畢...</p>");
break;
}
$(".moreload ul.list").append(target);
$(".moreload ul.list img").eq(mLis+i).each(function(){
$(this).attr('src',$(this).attr('realSrc'));
});
}
}
}
moreload.init();
</script>
<script src="js/jquery.min.js"></script>
<script>
var _content = []; //暫時儲存li循環內容
var moreload = {
_default:10, //預設顯示圖片個數
_loading:5, //每次點選按鈕後載入的個數
init:function(){
var lis = $(".moreload .hidden li");
$(".moreload ul.list").html("");
for(var n=0;n<moreload._default;n++){
lis.eq(n).appendTo(".moreload ul.list");
}
$(".moreload ul.list img").each(function(){
$(this).attr('src',$(this).attr('realSrc'));
})
for(var i=moreload._default;i<lis.length;i++){
_content.push(lis.eq(i));
}
$(".moreload .hidden").html("");
},
loadMore:function(){
var mLis = $(".moreload ul.list li").length;
for(var i =0;i<moreload._loading;i++){
var target = _content.shift();
if(!target){
$('.moreload .more').html("<p>全部載入完畢...</p>");
break;
}
$(".moreload ul.list").append(target);
$(".moreload ul.list img").eq(mLis+i).each(function(){
$(this).attr('src',$(this).attr('realSrc'));
});
}
}
}
moreload.init();
</script>
免責聲明
本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn
相關文章
使用PHP下載CSS檔案中的圖片的程式碼_PHP教學課程
21 Jul 2016
使用PHP下載CSS檔案中的圖片的程式碼。共用一段使用PHP下載CSS檔案中的圖片的程式碼 複製程式碼 程式碼如下: ?php //note 設定PHP逾時時間 set_time_limit(0); //note 取得樣式檔案內容 $styleFileC
如何使用 jQuery 載入動態插入的 iframe 後執行程式碼?
15 Nov 2024
如何在動態插入的 iframe 中利用 jQuery .ready 事件當使用 jQuery Thickbox 動態插入 iframe 時,...
jQuery 如何有效率地選擇具有特定 CSS 屬性的元素?
30 Nov 2024
在 jQuery 中選擇具有特定 CSS 屬性的元素問題:我們如何有效地選擇擁有特定 CSS 屬性的所有元素...
如何使用 jQuery 和 JavaScript 高效解析和顯示 JSON 資料?
06 Dec 2024
使用 jQuery 和 JavaScript 解析 JSON 資料這個簡短的教程解決了有效操作 JSON 資料的挑戰,特別是...
Hot Tools
jQuery2019情人節表白放煙火動畫特效
一款抖音上很火紅的jQuery情人節表白放煙火動畫特效,適合程式設計師、科技宅用來向心愛的女孩告白,無論你選擇願意或不願意,到最後都得同意。
layui響應式動畫登入介面模板
layui響應式動畫登入介面模板
520情人節表白網頁動畫特效
jQuery情人節表白動畫、520表白背景動畫
酷炫的系統登入頁
酷炫的系統登入頁
HTML5卡音樂播放器-CASSETTE PLAYER
HTML5卡音樂播放器-CASSETTE PLAYER
熱門文章
崩壞:星穹鐵道 - 所有金色替罪羊謎題解決方案
18 Jan 2025
手游攻略
印第安納瓊斯與大圈:高棉齒輪位置指南
27 Dec 2024
手游攻略
Tales Of Graces F 重製版:所有鎖定的寶箱密碼
18 Jan 2025
手游攻略
印第安納瓊斯與大圈:梵蒂岡藥瓶位置指南
26 Dec 2024
手游攻略
魯馬島:考古學家職業指南
03 Jan 2025
手游攻略