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

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

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

Ответ 1

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

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

К счастью, Nivo находится на 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

Ответ 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
    }
   });
});

Ответ 3

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

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

}

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

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