Lazyloading images in horizontal slider

Question

I am lazyloading the images on this site with jquery lazyload and a treshold: https://bm-translations.de/#leistungen

//Lazyload Images with Threshold https://www.appelsiini.net/projects/lazyload
$(function() {
    $("img.lazy").lazyload({
        threshold : 400
    });
});

So Images src is replaced by data-original. When I scroll to the element it should change it to src, as it.

But out of some reason its loading the images in the bootstrap-slider too slow (when I click to it or its autosliding some images havent loaded), as you can see. How to adjust this code, so its working for this as well?

The slider has a general structure like that: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Carousel JS is:

$('#myCarousel').carousel({
        interval: 9000,
    });

    // handles the carousel buttons
    $('[id^=carousel-selector-]').click( function(){
      var id_selector = $(this).attr("id");
      var id = id_selector.substr(id_selector.length -1);
      id = parseInt(id);
      $('#myCarousel').carousel(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $(this).addClass('selected');
    });

    // when the carousel slides, auto update
    $('#myCarousel').on('slide.bs.carousel', function (e) {
      var id = $('.item.active').data('slide-number');
      id = parseInt(id)+1;
      $('[id^=carousel-selector-]').removeClass('selected');
      $('[id=carousel-selector-'+id+']').addClass('selected');
    });

I tried this, but then it wasnt sliding anymore:

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

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

How to fix it, so its either lazy-loading before click/autoslide or at least to lazyload the whole carousel images with threshold?

thanks, you're right, but didnt solve the problem. Did I clarified the question or is there sth. not clear yet? I am asking, as I really want it to get working. — Krystian, Aug 14 '17 at 04:05
Why not just remove the lazy class from the carousel images? — K Scandrett, Aug 14 '17 at 04:17
I'm not sure how the lazy load code works, but perhaps because the images aren't visible is won't start trying to load them until they are rotated into view, which is too late. — K Scandrett, Aug 14 '17 at 04:19
Also your src for them has the "." in the path, which it shouldn't have i.e. `data-original="./bilder/Uebersetzungsdienst-Jena.png"` — K Scandrett, Aug 14 '17 at 04:21
its for speed optimization. It'll be also fine, if all images of the slider would load together until somebody scrolls to it. Dont know how to do so. Yes you're right, but its working there with the "." thatswhy I did not change. I guess your thinkings are right. Dont know how to solve this. — Krystian, Aug 14 '17 at 04:27
@KrystianManthey `timeLineAutoPlay()` has interval of 7000 so it's adding delay — Yogen Darji, Aug 14 '17 at 05:50
@yogendarji but this function doesnt apply to this carousel, its for here: https://bm-translations.de/#sprachrichtungen — Krystian, Aug 14 '17 at 06:18

score 7 · Answer 1 · answered Aug 14 '17 at 05:16

I suggest you use the "owl.carousel.js" plugin. It is much better and has more features.

$('.owl-carousel').owlCarousel({
    items:1,
    lazyLoad:true,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:3000,
    autoplayHoverPause:true,
});

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
</div>

I second this option. Owl or Slick carousel. Bootstrap's carousel just doesn't have enough versatility. You can do a lot more with the others mentioned, including built-in lazy loading. — lscmaro, Aug 15 '17 at 02:39

Lazyloading images in horizontal slider

1 Answers1

Linked