jQuery按需加載輪播圖(web前端性能優(yōu)化)
引言
關(guān)于幻燈輪播圖，想必大家都不陌生，尤其是基于 jQuery 的，插件、代碼網(wǎng)上一搜一大堆，但是真正符合自己需求的幾乎沒有，所以我要打造一個符合自身需求，經(jīng)得起廣大網(wǎng)民考驗(yàn)的 jQuery 輪播圖！
思路
為什么說網(wǎng)上其他一些輪播圖不符合我的要求？我的需求又是什么呢？
現(xiàn)在網(wǎng)上可以找到的多數(shù)幻燈輪播圖的 jQuery 插件的作法是，先把圖片和鏈接的 HTML 寫好，然后控制隱藏和顯示來輪流展示當(dāng)前的幻燈圖片。但是對用戶而言，我們始終只是看到當(dāng)前的一張圖片，那其他幾張隱藏的圖片為什么要事先加載進(jìn)來呢？這不是費(fèi)時費(fèi)力嗎？所以我的第一個需求是按需加載。
我們一般會把輪播圖放在首頁展示，但是首頁的重點(diǎn)內(nèi)容應(yīng)該是最近更新的文章，至少我不認(rèn)為圖片展示功能需要被搜索引擎收錄，所以我的第二個需求是符合 SEO。
實(shí)現(xiàn)
沖著以上兩個需求，我做了一個 DEMO ，大家不妨看看這個 DEMO 的源代碼，發(fā)現(xiàn)區(qū)別了嗎？是的，在這個 DEMO 的 HTML 源代碼中，你看不到任何的圖片和相關(guān)信息，都由 JS 載入進(jìn)來的，也就是說爬蟲爬不到，而且是隨著圖片的切換，一張一張地載入當(dāng)前的幻燈圖片。
這里我就只分享一下我的 JS 寫法，HTML 什么就請各位看源碼吧，代碼我就不一一細(xì)說了，注釋也都寫得很明白了。
$(function() {
var WangeSlide = (function() {
//配置
var config = {
//輪播圖尺寸
width : 960,
height : 350,
//是否自動切換
autoSwitch : true,
//自動切換間隔時間（毫秒）
interval : 6000,
//輪播圖圖片路徑
picPath : 'http://www.dowebok.com/demo/2014/93/img/',
//輪播圖圖片信息：圖片文件名 / 圖片標(biāo)題 / 圖片指向鏈接
picInfo : [
['fullimage1.jpg', '圖片1提示','http://codepen.io/webstermobile/'],
['fullimage1.jpg', '圖片2提示','http://codepen.io/webstermobile/'],
['fullimage1.jpg', '圖片3提示','http://codepen.io/webstermobile/']
]
};
//獲取圖片信息
/**
* @param index 圖片所在的索引值
**/
var getImgInfo = function(index) {
var imgSrc = config.picPath + config.picInfo[index][0],
imgAlt = config.picInfo[index][3],
imgUrl = config.picInfo[index][4],
imgId = 'slide_' + (index+1).toString(),
imgHtml = '<li id="' + imgId + '">' +
' <a href="' + imgUrl +'" rel="external nofollow" title="' + imgAlt + '" class="pic">' +
' <img src="' + imgSrc + '" alt="' + imgAlt + '" class="slide_thumb" />' +
' </a>' +
'</li>',
slideTextHtml = '<a href="' + imgUrl + '" rel="external nofollow" title="' + imgAlt + '">' + imgAlt+ '</a>';
return {
imgAlt : imgAlt,
imgUrl : imgUrl,
imgHtml : imgHtml,
slideTextHtml : slideTextHtml
}
};
//圖片完全加載后緩慢加載顯示
var fadeInImg = function(el, speed) {
//console.log(el)
el.find("img").load(function() {
el.find("img").addClass("loaded")
el.fadeIn(speed)
});
};
//圖片切換
/**
* @param index 圖片所在的索引值
* @param triggerCurEl 當(dāng)前觸發(fā)節(jié)點(diǎn)元素
**/
var imgSwitch = function(index, triggerCurEl) {
var slideId = 'slide_' + (index+1).toString(),
slideIdEl = document.getElementById(slideId);
if (slideIdEl) {
//如果已有對應(yīng)的元素，則顯示已有元素
var panelLi = $('#panel ul li');
panelLi.hide();
$(slideIdEl).fadeIn('slow');
} else {
//如果還沒有對應(yīng)的元素，則注入元素
$(getImgInfo(index).imgHtml).appendTo($('#panel ul'));
var panelLi = $('#panel ul li');
panelLi.hide();
//載入顯示圖片
fadeInImg($("#" +slideId), 'slow');
}
//獲取圖片的 alt 作為顯示信息
$('#slide_text').html(getImgInfo(index).slideTextHtml);
//當(dāng)前狀態(tài) cur
$('#trigger ul li').removeClass('cur');
triggerCurEl.addClass('cur');
};
//輪播圖
var slide = function() {
//設(shè)置輪播圖尺寸
$('#panel').css({
'width' : config.width + 'px',
'height' : config.height + 'px'
});
var result = getImgInfo(0).imgHtml
//初使化輪播圖，只加載第一張圖片信息
$('#panel ul').html($(result));
//載入顯示圖片
fadeInImg($('#slide_1'), 500);
//注入背景層 + 觸發(fā)器容器 + 輪播圖文字容器
var slideBg = '<div id="slide_bg"></div>',
trigger = '<div id="trigger"></div>',
slideText = '<div id="slide_text"></div>';
$('#panel').after(slideBg + trigger + slideText);
//獲取圖片的 alt 作為顯示信息
$('#slide_text').html(getImgInfo(0).slideTextHtml);
//注入觸發(fā)節(jié)點(diǎn)
var triggerUl = $('<ul></ul>');
triggerUl.appendTo($('#trigger'));
for (var i=0, j=config.picInfo; i<j.length; i++) {
$('<li>' + (i+1).toString() +'</li>').appendTo(triggerUl);
}
//當(dāng)前狀態(tài) cur
$('#trigger ul li').eq(0).addClass('cur');
//點(diǎn)擊觸發(fā)節(jié)點(diǎn)
$("#trigger ul li").click(function(){
var index = $("#trigger ul li").index($(this))
//console.log(index)
imgSwitch(index,$(this))
})
//鼠標(biāo)懸停時，停止切換
var goSwitch = true;
$('#panel').hover(
function() {goSwitch = false},
function() {goSwitch = true}
);
//自動切換
if (config.autoSwitch) {
setInterval(function() {
if (goSwitch) {
//判斷當(dāng)前cur所在的索引值
var index = parseInt($('.cur','#trigger').text()) - 1;
if (index > (config.picInfo.length-2)) {
index = -1;
}
imgSwitch((index+1), $('#trigger ul li:eq(' + (index+1) + ')'));
}
}, config.interval);
}
};
return {
//初使化
init : function() {
slide();
}
}
})();
WangeSlide.init();
})
按需加載的網(wǎng)絡(luò)請求情況
從圖上可以看到頁面加載的時候自動切換或者用戶點(diǎn)擊切換之前只加載了一張slide圖，大大節(jié)省了頁面加載量。
優(yōu)勢
同樣的效果，只是實(shí)現(xiàn)方法不同？會不會很蛋疼？這有什么優(yōu)勢呢？
舉個例子來說，優(yōu)化前，假設(shè)首頁切換的幻燈圖片有5張，平均每張圖片20K，也就是說你的首頁至少要加載100K的圖片，而這100K的圖片你能保證每個用戶都會去看嗎？如果用戶不看，豈不是白白浪費(fèi)了這100K的載入速度？
優(yōu)化后，在首頁初次載入的時候，僅需加載一張1K左右的，甚至是可有可無的 loading 圖片，當(dāng)用戶點(diǎn)擊下一張或者達(dá)到定時器的設(shè)置時才會去加載下一張圖片，大大節(jié)省了載入的時間。1K？100K？你懂的。
另外，用 JS 載入所需的圖片還有一個好處，就是在一些不支持 JS 的手機(jī)瀏覽器上，載入 100K 的圖片對于無法切換的輪播圖而言，是一個極大的累贅，而且也會大大降低用戶體驗(yàn)。
相關(guān)文章
jquery bind(click)傳參讓列表中每行綁定一個事件
用jquey bind 點(diǎn)擊事件時，傳參不注意可能會導(dǎo)致點(diǎn)擊每一行都是顯示相同內(nèi)容的情況,下面有個示例，感興趣的朋友可以參考下2014-08-08
本文給大家介紹bootstrap無限級分類jq拓展之前的無限級分類的封裝版的知識，非常不錯具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
focus函數(shù)可以用來發(fā)生點(diǎn)擊某個按鈕或者提交值錯誤等觸發(fā)事件發(fā)生時把焦點(diǎn)給到某個元素,具體用法如下，感興趣的朋友可以參考下2013-08-08
jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
本篇文章主要是對jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQueryUI如何自定義組件實(shí)現(xiàn)代碼
第一次自定義jQueryUI Widget 又是第一次，現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。2010-11-11
jquery清空input標(biāo)簽的值及清除標(biāo)簽里面的內(nèi)容
這篇文章主要介紹了jquery清空input標(biāo)簽的值,清除標(biāo)簽里面的內(nèi)容,清除input標(biāo)簽的值,可以通過直接將input標(biāo)簽的值設(shè)置為空來實(shí)現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
這篇文章主要介紹了jQuery根據(jù)元素值刪除數(shù)組元素的方法,涉及jQuery中splice及inArray方法的使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery中:enabled選擇器用法,實(shí)例分析了:enabled選擇器的功能、定義及選取所有可用元素的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery事件多次綁定與解綁問題,結(jié)合實(shí)例形式分析了jQuery事件多次綁定情況下的運(yùn)行情況,以及解綁相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了jQuery中replace()方法用法,實(shí)例分析了replace()方法的功能、定義及匹配元素去替換指定內(nèi)容的方法,需要的朋友可以參考下2015-05-05