Как сделать ленивую загрузку с помощью BXSlider

Question

Я использую галерею изображений, используя Bxslider. У меня есть более 15 изображений на слайде, на которые уходит много времени для загрузки. Поэтому мне нужно загружать изображения в каждый слайдер один за другим, когда появляется этот конкретный слайд. Я получил Пример отсюда lazyload and bxslider, который использует LazyLoad для загрузки изображений. Но это не работает для меня. Кто-нибудь может мне с этим помочь?

Im используя этот код

$(document).ready(function(){ 
    $("#moreLessons").bxSlider({ 
     startingSlide:1, 
     pager: false 
    }); 
    // trigger lazy to load new in-slided images 
    $("a.bx-prev, a.bx-next").bind("click", function() { 
     // extra call for lazy loading 
     setTimeout(function() { $(window).trigger("scroll"); }, 100); 
    }); 
}); 

Answer 1

Вы можете 'трюк' браузер для перемещения 1 точек, добавив:
$ (окно) .scrollTop ($ (окно) .scrollTop() + 1); для стрельбы по a.bx-prev и a.bx-next

Вы можете установить:
$ (window) .scrollTop ($ (window) .scrollTop() - 1); стрелять сразу после вызова событий.

Итак, если слайд-шоу составляет 50 изображений, вы не будете прокручивать страницу по 50 пикселей до конца.

Этот метод также будет работать с bxslider в Drupal 7 с добавлением модуля lazyload. Просто включите lazyload, установите значок загрузки в «none» и добавьте вышеупомянутые вызовы javascript в раздел обратного вызова параметров bxslider в вашем представлении. Вуаля! Идите вперед и поместите все изображения hi-rez там, где вам нравится.

Answer 2

<div class="slider"> 
    <div> 
     <img src="http://placekitten.com/400/200"> 
    </div> 
    <div> 
     <img class="lazy" src="http://placekitten.com/450/200" data-src="http://placekitten.com/450/200"> 
    </div> 
    <div> 
     <img class="lazy" src="http://placekitten.com/500/200" data-src="http://placekitten.com/500/200"> 
    </div> 
</div> 

$(function(){ 

    // create an options object to store your slider settings 
    var slider_config = { 
     mode: 'horizontal', // place all slider options here 
     onSlideBefore: function($slideElement){ 
      var $lazy = $slideElement.find(".lazy") 
      var $load = $lazy.attr("data-src"); 
      $lazy.attr("src",$load).removeClass("lazy"); 
      alert(JSON.stringify($lazy)); 
     } 
    } 
    // init the slider with your options 
    var slider = $('.slider').bxSlider(slider_config); 
});