Bootstrap-carousel ленивый загрузчик

Question

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

$("#myCarousel").bind("slid", function(){ 
    $img = $(".active img", this); 
    $img.attr("src", $img.data('lazy-load-src')); 
}); 

Это приводит к тому, карусели «нагрузка» текущее изображение, когда следующая кнопка (или предыдущий) кнопка нажата. Я хочу, чтобы он загружал не текущее изображение, а изображение после этого, и изображение перед текущим изображением, так что у меня все еще есть приятная скользящая анимация. И не изображение загрузки.

Итак, мой вопрос: как установить lazy-load-src в src предыдущего изображения и следующего изображения при нажатии следующей кнопки?

Answer 1

Существует несколько вариантов, в зависимости от точности, которую вам нужно, но вы должны держать lazy-load-src в своих собственных тегах img.

Вы можете использовать селекторы, вставить атрибуты data- и использовать это, чтобы выбрать следующее изображение:. Но это грязно.

Я думаю, что ваш лучший снимок использует метод .next() на ваших товарах, так что на slid вы загружаете следующее изображение. Что-то вроде:

$('#myCarousel').on('slid', function() { 
    var $nextImage = $('.active.item', this).next('.item').find('img'); 
    $nextImage.attr('src', $nextImage.data('lazy-load-src')); 
}); 

Answer 2

Я обновил Sherbrows ответ немного поддержать Bootstrap v3 и случайный индекс начало. Я использую страницу эскизов. Когда пользователь нажимает большой палец, карусель должен начинаться с этого индекса.

Показать карусель

function showGallery(startIndex) { 
    //Load first and second image 
    var imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 1) + ') img'); 
    imageElement.attr('src', imageElement.attr('data-lazy-load-src')); 
    imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 2) + ') img'); 
    imageElement.attr('src', imageElement.attr('data-lazy-load-src')); 
    //Init carousel 
    $('#fullscreengallery').carousel(startIndex); 
    //Show carousel 
    $('#fullscreengallery').removeClass('hidden'); 
}; 

Do отложенной загрузки

$('#fullscreengallery').on('slid.bs.carousel', function() { 
    //Lazy load 
    var nextImage = $('.active.item', this).next('.item').find('img'); 
    //If no next, select first 
    if(nextImage.length === 0){ 
     nextImage = $('#fullscreengallery .item:nth-child(1) img'); 
    } 
    //Set the source if it hasn't been set already 
    if (!nextImage.attr('src')) { 
     nextImage.attr('src', nextImage.attr('data-lazy-load-src')); 
    } 
}); 

Answer 3

Я принял ответ Arnoud Sietsema в один шаг. Изображения в вашей карусели могут иметь загрузку gifs для начала. Тогда ...

Показать каруселью

function showGallery(startIndex) { 
    //Load first, second and last image 
    var imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 1) + ') img'); 
    imageElement.attr('src', imageElement.attr('data-lazy-load-src')); 
    imageElement.attr('data-loaded', '1'); 

    imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 2) + ') img'); 
    imageElement.attr('src', imageElement.attr('data-lazy-load-src')); 
    imageElement.attr('data-loaded', '1'); 

    imageElement = $('#myCarousel .item:last img'); 
    imageElement.attr('src', imageElement.attr('data-src')); 
    imageElement.attr('data-loaded', '1'); 

    //Init carousel 
    $('#fullscreengallery').carousel(startIndex); 
    //Show carousel 
    $('#fullscreengallery').removeClass('hidden'); 
}; 

ли отложенной загрузки

$('#fullscreengallery').on('slid.bs.carousel', function() { 
    //Lazy load 
    var nextImage = $('.active.item', this).next('.item').find('img'); 
    //If no next, select first 
    if(nextImage.length === 0){ 
     nextImage = $('#fullscreengallery .item:nth-child(1) img'); 
    } 

    //Set the source if it hasn't been set already 
    if (nextImage.attr('data-loaded') == '0') { 
     var $downloadingImage = $("<img>"); 
     $downloadingImage.load(function(){ 
     nextImage.attr("src", $(this).attr("src")); 
      nextImage.attr('data-loaded', '1'); 
     }); 
     $downloadingImage.attr("src", nextImage.attr('data-src')); 
    } 

    var prevImage = $('.active.item', this).prev('.item').find('img'); 
    //If none, select last 
    if(prevImage.length === 0){ 
     prevImage = $('#myCarousel .item:last img'); 
    } 
    //Set the source if it hasn't been set already 
    if (prevImage.attr('data-loaded') == '0') { 
     var $downloadingImage = $("<img>"); 
     $downloadingImage.load(function(){ 
      prevImage.attr("src", $(this).attr("src")); 
      prevImage.attr('data-loaded', '1'); 
     }); 
     $downloadingImage.attr("src", prevImage.attr('data-src')); 
    } 


}); 

Разница в том, что при попытке загрузить следующий слайд, он первым загружен «под капотом», и, только при загрузке, вставляется в карусель. В результате изображение загрузки отображается до тех пор, пока изображение не будет полностью загружено.

Кроме того, теперь карусель может перемещаться в обоих направлениях.