Как я могу контролировать, как Nivoslider загружает изображения?

Question

Я использую отличный плагин Nivoslider для демонстрации набора фотографий на моей домашней странице, в настоящее время 5. Все работает нормально, но каждая фотография добавляет около 150 К к весу страницы. На самом деле я хотел бы продемонстрировать около 10 «слайдов», но, поскольку все эти изображения предварительно загружаются при открытии страницы, вес страницы скоро станет (слишком) большим, тем более что многие пользователи, скорее всего, не будут ждать «показа» закончить.

Мне было интересно, можно ли не предварительно загружать изображения или лучше, только x изображений впереди. Я не могу найти ничего об этом в документации, поэтому я предполагаю, что это не поддерживается изначально. Есть идеи?

Answer 1

Я искал подобное решение. У меня есть галерея изображений на веб-сайте, которая загружает дюжину высококачественных изображений на главной странице с помощью плагина для слайд-шоу. И все эти изображения загружаются одновременно, добавляя 2-3 мегабайта к весу страницы. Нет кости.

Nivo оставляет обработку изображений до браузера. Он читает тег <img src="...">, а затем склеивает изображения в слайд-шоу с эффектами плавного перехода. В коде нет ничего, что могло бы контролировать загрузку или предварительную загрузку изображений.

К счастью, Ниво на Github. Поэтому я раздвоил его для поддержки отложенной загрузки изображений:

https://github.com/leepowers/Nivo-Slider

Использование такое же. С одним небольшим изменением в HTML

<div id="slider">
 <img src="my-large-image.jpg" alt="">
 <img src="my-large-image2.jpg" alt="">
 <img src="another-biggun.jpg" alt="">
</div>

Изменить атрибуты изображения src на data-src атрибуты:

<div id="slider">
 <img data-src="my-large-image.jpg" alt="">
 <img data-src="my-large-image2.jpg" alt="">
 <img data-src="another-biggun.jpg" alt="">
</div>

Поскольку data-src не анализируется, изображения не загружаются, пока Nivo не будет готова их использовать. data-src имеет приоритет над src, что означает, что вы можете указать версии с низким разрешением в src для пользователей, не поддерживающих JavaScript, или заполнить src спейсерным изображением, чтобы HTML прошел валидатор.

Проверьте это! Я реализую это на нескольких проектах. Демоверсия доступна здесь: http://powers1.net/files/nivo/demo/demo-lazy.html

Answer 2

Слайдер Nivo не имеет предзагрузчика изображений. Если вы используете свой слайдер с событием загрузки jQuery (как в демоверсиях nivo), слайдер nivo будет ждать, пока все изображения не загрузятся на страницу.

$(window).load(function() {
        $('#slider').nivoSlider();
});

Если вы не хотите ждать загрузки всех изображений, вы можете предпочесть событие готовности документа, как показано ниже. Изображения не будут загружены заранее.

$(document).ready(function() {
   $('#slider').nivoSlider(); 
});

Если вы хотите иметь контролируемую предварительную загрузку; Вы можете использовать один из плагинов предварительной загрузки изображений из jQuery; http://www.farinspace.com/jquery-image-preload-plugin/

$(document).ready(function() {
   $('#slider').nivoSlider(); 
   //Before starting the slider preload your images then start your slider.
   $.imgpreload(['/images/a.gif','/images/b.gif'],
   {
    all: function()
    {
       //Start slider here
    }
   });
});

Answer 3

Ответ от Бурака мне подходит, но в Safari он не работает. Я пытался изменить, и это мое решение:

$(window).ready(function() {
   $('#slider').nivoSlider(); 

Работает правильно в Safari, IE и Firefox. Конечно, вы можете добавить контролируемую предварительную нагрузку.

Answer 4

Что если по умолчанию при загрузке страницы вы инициализируете ползунок с подмножеством изображений. После чего вы динамически создаете изображения с помощью jQuery и повторно инициализируете ползунок? Ниже приведен пример использования вызова ajax.

Обновление или перезапуск Nivoslider или даже уничтожение

Answer 5

вы можете создать функцию для помещения изображений в массив и предварительной загрузки

jQuery.preloadImages = function() {   
 for(var i = 0; i<arguments.length; i++)   
{
      jQuery("<img>").attr("src", arguments[i]);   
}

}

, а для использования функции предоставить массив URL-адресов изображений:

$.preloadImages("test.png", "/imageUrl");

Answer 6

Вы можете скрыть #slider до загрузки страницы, а затем загрузить div.

1. Добавить display:none; к #slider в вашем CSS-файле.

2. Добавьте $('#slider').css('display','block'); в свой $(window).load(function() {..}); вместе с существующим кодом, чтобы оно стало:

   $(window).load(function() {
       $('#slider').css('display','block');
   });