JQuery LazyLoad на carouFredSel

Question

Im используя jquery lazyload, чтобы загрузить свои изображения

но часть моего сайта имеет carouFredSel

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

jQuery(".foo4").carouFredSel({ 
     auto: !1, 
     prev: ".prev4", 
     next: ".next4", 
     pagination: ".pager4", 
     mousewheel: !0, 
     swipe: { 
      onMouse: !0, 
      onTouch: !0 
     } 
    }), 

выше кода является Java-слайд карусель и ниже я мой lazyscript

jQuery("img.lazy").lazyload(); 

Любая помощь очень ценится!

Answer 1

В carouFredSel, вы обеспечиваете изображение URL в данных Src как

<img data-src="image-url"/> 

Так, чтобы показать изображение вам нужно настроить, в OnBefore из carouFredSel нравится.

scroll: { 
    onBefore: function(data) { 
     var $current = data.items.visible.first(), 
      visible = data.items.visible, 
      src = visible.data('src'); 

     visible.attr('src', src); 
    } 
} 

Добавьте эти строки в коде carouFredSel как

jQuery(".foo4").carouFredSel({ 
     auto: !1, 
     prev: ".prev4", 
     next: ".next4", 
     pagination: ".pager4", 
     mousewheel: !0, 
     swipe: { 
      onMouse: !0, 
      onTouch: !0 
     }, 
     scroll: { 
      onBefore: function(data) { 
      var $current = data.items.visible.first(), 
       visible = data.items.visible, 
       src = visible.data('src'); 

      visible.attr('src', src); 
     } 
     } 
    }); 

Answer 2

Я считаю, что я решил эту проблему для ленивых образов загрузки с caroufredsel

$('#youtube-playlist').carouFredSel({ 
    width: '100%', 
    height: "variable", 
    circular: false, 
    infinite: false, 
    responsive: true, 
    items: { 
     visible: { 
      min: 2, 
      max: 4 
     } 
    }, 
    onCreate: function(data) { 
     // Swap data-src for first 4 items 
     // console.log(data); 
     $(this).find("img[data-src]").each(function (i, item) { 
      $(this).attr('src', $(this).attr('data-src')).removeAttr('data-src'); 
      return i < data.items.length-1; 
     }); 
    }, 
    scroll: { 
     onBefore: function(data) { 
      // Lazyload next visible thumbnails 
      // console.log(data.items.visible.length); 
      for (i = 0; i < data.items.visible.length; i++) { 
       var $img = data.items.visible.eq(i).find('img'); 
       $img.attr('src', $img.attr('data-src')).removeAttr('data-src'); 
      } 
     } 
    }, 
    align: 'center', 
    auto: false, 
    prev: '#prev', 
    next: '#next' 
}); 

1. OnCreate: найти первый видимый изображения и swap data-src в атрибут src.
2. Прокрутка по дате:: Итерация через следующие видимые элементы и атрибуты подкачки.

Осмотрите вкладку Network [filter img] в инструментах chrome dev и смотрите, как происходит lazyload.

Я попытался добавить значение ширины к моим элементам, чтобы удалить уведомление журнала консоли из caroufredsel, но ему не нравится lazyload onCreate.