English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Введение
О слайдерах,想必大家都不陌生，особенно о jQuery, плагинах и кодах, их множество в Интернете, но действительно соответствующие вашим требованиям почти нет, поэтому я хочу создать jQuery слайдер, который соответствует моим требованиям и пройдет проверку广大网民。
Методы
Почему другие слайдеры в Интернете не соответствуют моим требованиям? Что именно я хочу?
Теперь можно найти множество做法 для jQuery плагинов слайдеров, которые сначала пишут HTML изображений и ссылок, а затем контролируют скрытие и отображение для轮流ого показа текущего изображения слайдера. Но с точки зрения пользователя, мы видим только одно изображение, почему другие изображения нужно загружать заранее? Это не зря тратит время и силы? Поэтому моя первая потребность - загрузка по запросу.
Обычно мы размещаем слайдер на главной странице для демонстрации, но ключевым содержимым главной страницы должны быть последние обновления статей, по крайней мере, я не думаю, что функция демонстрации изображений должна быть проиндексирована поисковыми системами, поэтому моя вторая потребность соответствует SEO.
Реализация
Имея в виду эти два требования, я создал DEMO, не стесняйтесь взглянуть на исходный код этого DEMO, заметили разницу? Да, в исходном коде HTML этого DEMO вы не увидите никаких изображений и相关信息, все это загружается с помощью 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', 'картинка3 подсказка','http://codepen.io/webstermobile/']
['fullimage1.jpg', 'картинка2 подсказка','http://codepen.io/webstermobile/']
['fullimage1.jpg', 'картинка1 подсказка','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="[#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
}
};
//图片完全加载后缓慢加载显示
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 текущий элемент триггера
/*/
var imgSwitch = function(index, triggerCurEl) {
var slideId = 'slide_' + (index+1).toString(),
slideIdEl = document.getElementById(slideId);
if (slideIdEl) {
//如果已有对应的元素，则显示已有元素
var panelLi = $('#panel ul li');
panelLi.hide();
$($(slideIdEl)).fadeIn('slow');
} else {
//如果还没有对应的元素，则注入元素
$(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');
};
//轮播图
var slide = function() {
//设置轮播图尺寸
$('#panel').css({
'width' : config.width + 'px',
'height' : config.height + 'px'
});
var result = getImgInfo(0).imgHtml;
//初始化轮播图，只加载第一张图片信息
$('#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 {
// Инициализация
init: function() {
slide();
}
}
})();
WangeSlide.init();
)
Ситуации загрузки сетевых запросов по требованию
Как видно из изображения, при загрузке страницы автоматически переключается или перед нажатием пользователем переключается, загружается только одно изображение slide, что значительно сокращает объем загрузки страницы.
Преимущества
То же самое, только метод реализации другой? Не слишком ли это муторно? Что это за преимущество?
Давайте рассмотрим пример: до оптимизации, предположим, что на главной странице есть 5 слайдов, и средний размер каждого изображения составляет 20K, что означает, что ваша главная страница должна загрузить как минимум 100K изображений, и вы можете гарантировать, что все пользователи посмотрят эти 100K изображений? Если пользователи не смотрят, не будет ли это пустой тратой скорости загрузки в 100K?
После оптимизации, при первом загрузке страницы нужно загрузить всего одно изображение объемом около 1K, даже если это не unbedingt необходимо, а при нажатии на следующее изображение или при достижении времени таймера загружается следующее изображение, что значительно сокращает время загрузки. 1K? 100K? Вы понимаете.
Кроме того, есть одно преимущество использования JS для загрузки необходимых изображений: на некоторых мобильных браузерах, которые не поддерживают JS, загрузка изображения объемом 100K для несменяемого слайдера является极大的 нагрузкой и значительно снижает пользовательский опыт.