Предварительная загрузка изображения OwlCarousel в фоновом режиме

Я использую owlcarousel 2 с параметрами lazyload true, я хочу начать предварительную загрузку изображений следующих слайдов в фоновом режиме, пока пользователь видит первое изображение карусели, чтобы пользователь не видел загрузчик и напрямую видел загруженное изображение в следующих слайдах.

вот мой html код

<div class="inner-gallery">
  <div id="inner-gallery">
   <div class="gallery-item">
         <div class="gallery-item2">  
           <img class="lazyOwl" data-src="<?php echo $image[0]; ?>" alt=""/>
         </div>
   </div>
  </div>
</div>

вот мой код javascript

$(document).ready(function(){
   $("#inner-gallery").owlCarousel({
    navigation : true, // Show next and prev buttons
    autoPlay : false,
    slideSpeed : 300,
    lazyLoad:true,
    paginationSpeed : 400,
    singleItem:true,
    autoHeight : true,
    navigationText : ["", ""],
   });
});

jquery owl-carousel owl-carousel-2 preloading
person chirag dodia    schedule 02.09.2015    source источник
comment
Вы можете добавить обратный вызов onLazyLoaded в опции. Документации для версии 2 недостаточно, по крайней мере для меня, но если вы нашли следующий элемент в карусели, изображение может быть предварительно загружено чем-то вроде var nextPic = new Image(); nextPic.src = $(nextItem).find('img').attr('data-src');   -  person RonaldPK    schedule 21.09.2015
comment
Вы нашли решение?   -  person al404IT    schedule 21.12.2015

Ответы (3)


arrow_upward
2
arrow_downward

Не знаю, почему, но мой первый элемент равен 2, поэтому мне пришлось увеличить общее количество на 2.

var mycarousel = $('#inner-gallery');

mycarousel.on('loaded.owl.lazy', function(event) {

    var nextpic = new Image();
    var totitem = event.item.count + 2;     
    var nextitem = event.item.index + 1;

    if (nextitem <= totitem) {
        var imgsrc = $(event.target).find('.gallery-item').eq(nextitem).find('img').data('src');
        nextpic.src = imgsrc;
    }

});
person al404IT    schedule 21.12.2015

arrow_upward
2
arrow_downward

после ответа al404IT мне удалось таким образом предварительно загрузить следующее изображение в карусели. Поскольку я показываю часть следующего изображения, мне также нужно было сделать следующее изображение видимым.

mycarousel.on('loaded.owl.lazy', function(event) {
    var totitem = event.item.count + 2;
  var nextitem = event.item.index + 1;
  if (nextitem <= totitem) {
    var imgsrc = $(event.target).find('.item').eq(nextitem).find('img').data('src');
    console.log($(event.target).find('.item').eq(nextitem).find('img').attr("src"));
    $(event.target).find('.item').eq(nextitem).find('img').attr("src", imgsrc).css("opacity", "1");
  }
});
person Lorenzo    schedule 16.02.2017

arrow_upward
0
arrow_downward

В документации предлагается вариант lazyLoadEager: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Поэтому добавление «lazyLoadEager: 1» к вашим параметрам должно помочь.

person Dmitry Kuznetsov    schedule 08.05.2019