English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Introduction
Les diaporamas en boucle sont bien connus de tous, en particulier ceux basés sur jQuery, où l'on trouve de nombreux plugins et codes sur Internet, mais qui correspondent rarement à nos besoins réels, donc je veux créer un diaporama jQuery qui répond à mes besoins personnels et qui peut passer le test des utilisateurs du Web.
Approche
Pourquoi d'autres diaporamas en boucle trouvés sur Internet ne correspondent-ils pas à mes exigences ? Quelles sont mes exigences ?
La plupart des plugins jQuery de diaporama en boucle trouvés sur Internet procèdent ainsi : d'abord, écrire l'HTML des images et des liens, puis contrôler l'ajout et le retrait pour afficher alternativement les images de diapositives actuelles. Mais pour l'utilisateur, nous ne voyons que l'image actuelle, pourquoi faut-il précharger les autres images cachées ? Ce n'est pas gaspiller du temps et de l'énergie ? Donc, ma première exigence est de charger sur demande.
Nous plaçons généralement les diaporamas en boucle sur la page d'accueil pour les exposer, mais le contenu principal de la page d'accueil devrait être les articles mis à jour récemment, du moins je ne pense pas que la fonction d'affichage d'images doit être indexée par les moteurs de recherche, donc ma deuxième exigence est de respecter l'SEO.
实现
冲着以上两个需求，我做了一个 DEMO ，大家不妨看看这个 DEMO 的源代码，发现区别了吗？是的，在这个 DEMO 的 HTML 源代码中，你看不到任何的图片和相关信息，都由 JS 载入进来的，也就是说爬虫爬不到，而且是随着图片的切换，一张一张地载入当前的幻灯图片。
这里我就只分享一下我的 JS 写法，HTML 什么就请各位看源码吧，代码我就不一一细说了，注释也都写得很明白了。
$(function() {
var WangeSlide = (function() {
//配置
var config = {
//轮播图尺寸
width : 960,
height : 350,
//是否自动切换
autoSwitch : true,
//自动切换间隔时间（毫秒）
interval : 6000,
//轮播图图片路径
picPath : 'http://www.dowebok.com/demo/2014/93/img/',
//轮播图图片信息：图片文件名 / 图片标题 / 图片指向链接
picInfo : [
['fullimage1.jpg', '图片1提示','http://codepen.io/webstermobile/'],
['fullimage1.jpg', '图片2提示','http://codepen.io/webstermobile/'],
['fullimage1.jpg', '图片3提示','http://codepen.io/webstermobile/']
]
};
//获取图片信息
/**
* @param index Valeur d'index de l'image
**/
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
}
};
//Afficher lentement l'image après qu'elle ait été complètement chargée
var fadeInImg = function(el, speed) {
//console.log(el)
el.find("img").load(function() {
el.find("img").addClass("loaded")
el.fadeIn(speed)
});
};
//Changement d'image
/**
* @param index Valeur d'index de l'image
* @param triggerCurEl Élément de déclenchement actuel
**/
var imgSwitch = function(index, triggerCurEl) {
var slideId = 'slide_' + (index+1).toString(),
slideIdEl = document.getElementById(slideId);
if (slideIdEl) {
//Si l'élément correspondant existe déjà, afficher l'élément existant
var panelLi = $('#panel ul li');
panelLi.hide();
$(slideIdEl).fadeIn('slow');
} else {
//Si l'élément correspondant n'existe pas encore, insérer l'élément
$(getImgInfo(index).imgHtml).appendTo($('#panel ul'));
var panelLi = $('#panel ul li');
panelLi.hide();
//chargement de l'image à afficher
fadeInImg($("#" +slideId), 'slow');
}
//obtention du texte alternatif de l'image comme information affichée
$('#slide_text').html(getImgInfo(index).slideTextHtml);
//état courant cur
$('#trigger ul li').removeClass('cur');
triggerCurEl.addClass('cur');
};
//Carrousel
var slide = function() {
//Définir la taille du carrousel
$('#panel').css({
'width' : config.width + 'px',
'height' : config.height + 'px'
});
var result = getImgInfo(0).imgHtml
//initialisation de la diaporama, charge uniquement l'information de l'image 1
$('#panel ul').html($(result));
//chargement de l'image à afficher
fadeInImg($('#slide_1), 500);
//injection de la couche de fond + conteneur du déclencheur + conteneur de texte de la diaporama
var slideBg = '<div id="slide_bg"></div>',
trigger = '<div id="trigger"></div>',
slideText = '<div id="slide_text"></div>';
$('#panel').after(slideBg + trigger + slideText);
//obtention du texte alternatif de l'image comme information affichée
$('#slide_text').html(getImgInfo(0).slideTextHtml);
//injection du noeud déclencheur
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);
}
//état courant cur
$('#trigger ul li').eq(0).addClass('cur');
//cliquez sur le noeud déclencheur
$("#trigger ul li").click(function(){
var index = $("#trigger ul li").index($(this))
//console.log(index)
imgSwitch(index,$(this))
})
//arrêt du changement au survol de la souris
var goSwitch = true;
$('#panel').hover(
function() {goSwitch = false},
function() {goSwitch = true}
);
//changement automatique
if (config.autoSwitch) {
setInterval(function() {
if (goSwitch) {
//Vérifier la valeur de l'index actuel de 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 {
//Initialisation
init : function() {
slide();
}
}
})();
WangeSlide.init();
})
Situation de requêtes réseau à chargement sur demande
On peut voir sur la figure que lors du chargement de la page, seules une ou deux images slide sont chargées avant que l'utilisateur ne clique pour changer ou avant que le timer ne soit réglé, ce qui économise considérablement la quantité de chargement de la page.
Avantages
Même effet, mais la méthode d'implémentation est différente ? Cela ne serait-il pas pénible ? Quels sont les avantages ?
Pour illustrer, avant l'optimisation, supposons que les images des diapositives de la page d'accueil soient5images, avec une moyenne de20K, cela signifie que votre page d'accueil doit au moins charger100K, les images, et cela100K, pouvez-vous garantir que chaque utilisateur regardera chaque image ? Si l'utilisateur ne regarde pas, ne serait-ce que gaspiller ces100K, quelle est la vitesse de chargement ?
Après l'optimisation, lors du chargement initial de la page d'accueil, il suffit de charger une seule1K environ, même si les images de chargement optionnelles ne sont pas nécessaires, ne seront chargées que lorsque l'utilisateur cliquera sur l'image suivante ou lorsque le timer sera réglé, ce qui économise considérablement le temps de chargement.1K ?100K ? Vous le savez.
De plus, charger les images nécessaires avec JS a un avantage supplémentaire, c'est qu'elles sont chargées sur les navigateurs mobiles qui ne prennent pas en charge JS 100K, les images pour les diaporamas qui ne peuvent pas être changés sont un fardeau énorme et réduisent également considérablement l'expérience utilisateur.