English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Introduzione
Sulla carosella slideshow, penso che tutti siano familiari, specialmente quelle basate su jQuery, ci sono molte librerie e codici online, ma quasi nessuna corrisponde veramente alle nostre esigenze, quindi voglio creare una carosella slideshow jQuery che soddisfi le mie esigenze e che possa resistere alla verifica dei molti utenti.
Pensiero
Perché dire che altre caroselle slideshow online non soddisfano le mie esigenze? Quali sono le mie esigenze?
La maggior parte delle implementazioni delle librerie jQuery per le caroselle slideshow disponibili online è di scrivere prima l'HTML delle immagini e dei link, quindi controllare l'oscuramento e la visualizzazione per mostrare alternativamente l'immagine della diapositiva corrente. Ma per l'utente, vediamo sempre solo un'immagine, perché caricare preventivamente altre immagini nascoste? Questo non è una perdita di tempo e fatica? Quindi la mia prima esigenza è il caricamento su richiesta.
Di solito mettiamo la carosella nella homepage per mostrare, ma il contenuto principale della homepage dovrebbe essere gli articoli aggiornati di recente, almeno non credo che la funzione di visualizzazione delle immagini debba essere inclusa nei risultati dei motori di ricerca, quindi la mia seconda esigenza è conforme all'SEO.
Implementazione
Rispondendo a queste due esigenze, ho creato un DEMO, non esitate a guardare il codice sorgente di questo DEMO, avete notato la differenza? Sì, nel codice sorgente HTML di questo DEMO, non vedete nessuna immagine e informazioni correlate, tutte caricate tramite JS, il che significa che i crawler non possono accedervi e sono caricati uno per uno man mano che le immagini si cambiano.
Qui condividerò solo la mia scrittura JS, per HTML vi prego di guardare il codice sorgente, non ho spiegato il codice uno per uno e i commenti sono ben spiegati.
$(function() {
var WangeSlide = (function() {
// configurazione
var config = {
// dimensioni della carosella
larghezza : 960,
altezza : 350,
//Se cambiare automaticamente
autoSwitch : true,
//Intervallo di cambiamento automatico (millisecondi)
interval : 6000,
//Percorso delle immagini del carosello
picPath : 'http://www.dowebok.com/demo/2014/93/img/',
//Informazioni delle immagini del carosello: nome del file immagine / titolo immagine / link di destinazione immagine
picInfo : [
['fullimage1.jpg', 'Suggerimento immagine1','http://codepen.io/webstermobile/']
['fullimage1.jpg', 'Suggerimento immagine3','http://codepen.io/webstermobile/']
['fullimage1.jpg', 'Immagine completa1.jpg','http://codepen.io/webstermobile/']
]
};
//获取图片信息
*/
* @param index valore dell'indice dell'immagine
/*
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="[#0#]" class="pic">+'
' <img src="' + imgSrc + '" alt="[#0#]" class="slide_thumb" />+'
' </a>+'
'</li>',
slideTextHtml = '<a href="' + imgUrl + '" rel="external nofollow" title="[#0#]">' + imgAlt+ '</a>;',
return {
imgAlt : imgAlt,
imgUrl : imgUrl,
imgHtml : imgHtml,
slideTextHtml : slideTextHtml
}
};
//carica lentamente l'immagine una volta che è completamente caricata
var fadeInImg = function(el, speed) {
//console.log(el);
el.find("img").load(function() {
el.find("img").addClass("loaded");
el.fadeIn(speed);
});
};
//cambio immagine
*/
* @param index valore dell'indice dell'immagine
* @param triggerCurEl elemento attivatore corrente
/*
var imgSwitch = function(index, triggerCurEl) {
var slideId = 'slide_' + (index+1).toString(),
slideIdEl = document.getElementById(slideId);
if (slideIdEl) {
//se ci sono già gli elementi corrispondenti, mostra gli elementi esistenti
var panelLi = $('#panel ul li');
panelLi.hide();
$(slideIdEl).fadeIn('slow');
} else {
//se non ci sono ancora gli elementi corrispondenti, inserisci gli elementi
$(getImgInfo(index).imgHtml).appendTo($('#panel ul'));
var panelLi = $('#panel ul li');
panelLi.hide();
//载入显示图片
fadeInImg($("#" +slideId), 'slow');
}
//获取图片的 alt 作为显示信息
$('#slide_text').html(getImgInfo(index).slideTextHtml);
//当前状态 cur
$('#trigger ul li').removeClass('cur');
triggerCurEl.addClass('cur');
};
//carosello
var slide = function() {
//impostazione delle dimensioni del carosello
$('#panel').css({
"width" : config.width + "px",
"height" : config.height + "px"
});
var result = getImgInfo(0).imgHtml
//inizializzazione del carosello, carica solo le informazioni dell'immagine 1
$('#panel ul').html($(result));
//载入显示图片
fadeInImg($('#slide_1'), 500);
//注入背景层 + 触发器容器 + 轮播图文字容器
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);
//注入触发节点
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);
}
//当前状态 cur
$('#trigger ul li').eq(0).addClass('cur');
//点击触发节点
$("#trigger ul li").click(function(){
var index = $("#trigger ul li").index($(this))
//console.log(index)
imgSwitch(index,$(this))
)
//鼠标悬停时，停止切换
var goSwitch = true;
$('#panel').hover(
function() {goSwitch = false},
function() {goSwitch = true}
);
//自动切换
if (config.autoSwitch) {
setInterval(function() {
if (goSwitch) {
//判断当前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 {
//Inizializzazione
init : function() {
slide();
}
}
})();
WangeSlide.init();
)
Condizioni di richiesta di caricamento su richiesta
Dalla figura si può vedere che durante il caricamento della pagina, l'automazione del cambio o il clic dell'utente prima del cambio, viene caricata solo una slide, riducendo notevolmente il carico di caricamento della pagina.
Vantaggi
Stesso effetto, ma metodo di implementazione diverso? Non sembra un po' fastidioso? Quali sono i vantaggi?
Per esempio, prima dell'ottimizzazione, supponiamo che ci siano 5 immagini di slideshow nella pagina home, ciascuna di circa 20K, il che significa che la tua pagina home deve caricare almeno 100K di immagini, e puoi garantire che ogni utente guardi queste 100K di immagini? Se l'utente non le guarda, non sarebbe una perdita di velocità di caricamento di 100K?
Dopo l'ottimizzazione, durante il caricamento iniziale della pagina home, è sufficiente caricare un'immagine di circa 1K, persino una immagine di caricamento non necessaria, e solo quando l'utente clicca sulla prossima immagine o raggiunge la configurazione del timer才会 caricare l'immagine successiva, riducendo notevolmente il tempo di caricamento. 1K? 100K? Tu lo sai.
Inoltre, c'è un vantaggio nell'uso di JS per caricare le immagini necessarie, ovvero che su alcuni browser mobili che non supportano JS, il caricamento di un'immagine di 100K può essere un grande peso, e può anche ridurre notevolmente l'esperienza utente.