How can I get JQuery Lazy Load to work with Slide JS?

**wyclef** · 03-02-2016, 09:32 PM

Hello, is there a way to utilize JQuery Lazy Load (Lazy Load Plugin for jQuery) with Slide JS (Slide JS) Lazy Load seems to work fine when I have a singular image but if I have a div with several images in it in carousel/slider form it just wants to load the first slide and if I click next... i have to jiggle the scrollbar to trigger the load. There is a horizontal function in Lazy Load but it seems the entire thing revolves around a user manipulating the scrollbar so I'm wondering if there is a way to port a function so that it can either Lazy Load an entire div containing images... or load the next image based on the next one cued up when you click next or prev or whatever. Hoping there is a simple way to go about this. Thanks.

**Sempervivum** · 03-02-2016, 10:31 PM

AFAIK the common lazyload scripts are based on the scrolling position and do not work for a slideshow. However, one could use the callbacks to load the next image. E. g. image nr. 3 is displayed --> load images nr. 4 and nr. 2 if not loaded yet. However this will not work when using the bullets to navigate as the next image cannot be predicted.

**wyclef** · 03-02-2016, 11:29 PM

Would there be a way to just lazy load the entire slideshow div? Because that would somewhat solve my problem since I'm not even using the next prev buttons but just the bullets. I think lazy loading the dub could be a practical solution for my situation, thanks for the info.

**Sempervivum** · 03-02-2016, 11:46 PM

Ah, I see, you like to lazy load the complete slideshow based on scrolling and the problem is that invisible images are not loaded when they enter the viewport.
Setting the option skip_invisible to false should fix this. The default value is true so that invisible images are not loaded.

**wyclef** · 03-03-2016, 12:06 AM

Hmmm... I had tried skip_invisible without luck. Let me try again I may have to upload something for your review.

**wyclef** · 03-03-2016, 01:17 AM

Is this not the correct syntax for the function?

Code:

$(function() {
     $("img.lazy").lazyload({
         effect : "fadeIn",
         container: $('#slides'),
         skip_invisible : false
     });
  });

this would be the corresponding html

Code:

<div id="slides" class="slider">

    <img class="lazy" data-original="1.jpg" />
    <img class="lazy" data-original="2.jpg" />
    <img class="lazy" data-original="3.jpg" />

    <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-left"></i></a>
    <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-right"></i></a>

</div>

**wyclef** · 03-03-2016, 02:12 AM

I've attached a dumbed down version of what I'm working with... it sort of works but not really. Just seems like it's fading in on page load. If you scroll to it vs. are scrolled to it and reload seems to make a difference as well and it's important to click through to the second and third image to see how it's not loading those all the time.

lazy.zip

**Sempervivum** · 03-03-2016, 08:50 AM

In order to ensure that the slideshow is initialized before the layz loading, you should place both instructions one after another:

Code:

<script type="text/javascript">
    function initSlides() {
        $('#slides').slidesjs({
            width: 523,
            height: 337,
            navigation: false
        });
    }
    // lazyload
    $(function () {
        initSlides();
        $("img.lazy").lazyload({
            effect: "fadeIn",
            skip_invisible: false
        });
    });
</script>

The main problem was that the slideshow arranges the images side by side. The result is, that some images are located outside the viewport, left or right when there are many. I've tried to fix this by removing the check for the horizontal position and this seems to work fine. Change the function update in the lazyload script to this:

Code:

        function update() {
            var counter = 0;

            elements.each(function() {
                var $this = $(this);
                if (settings.skip_invisible && !$this.is(":visible")) {
                    return;
                }
                if ($.abovethetop(this, settings)) {
                        /* Nothing. */
                } else if (!$.belowthefold(this, settings)) {
                        $this.trigger("appear");
                        /* if we found an image we'll load, reset the counter */
                        counter = 0;
                } else {
                    if (++counter > settings.failure_limit) {
                        return false;
                    }
                }
            });

        }

Hope this works for you too and the missing horizontal check is OK.

Edit: AFAIK specifying a container is not necessary and will make the lazy loading inactive. I' removed this in the code above.

**Sempervivum** · 03-03-2016, 08:59 AM

PS: It seems to me that my explanation above was not completely correct: As you specified a container, this container is the reference when checking the position. The images not visible are located outside of the container, left and right, so that the check for the horizontal position was negative.

**wyclef** · 03-03-2016, 04:45 PM

Checking to see if this works... but it looks like you were missing a few brackets is this the correct code? Also, will this impact singular images? It seems like it will work but it isn't showing the gray background first.

Code:

function update() {
            var counter = 0;

            elements.each(function() {
                var $this = $(this);
                if (settings.skip_invisible && !$this.is(":visible")) {
                    return;
                }
                if ($.abovethetop(this, settings)) {
                        /* Nothing. */
                } else if (!$.belowthefold(this, settings)) {
                        $this.trigger("appear");
                        /* if we found an image we'll load, reset the counter */
                        counter = 0;
                } else {
                    if (++counter > settings.failure_limit) {
                        return false;
                    }
                }
            });

        }

**Sempervivum** · 03-03-2016, 05:04 PM

Indeed, you are right. Must read:

Code:

                if (settings.skip_invisible && !$this.is(":visible")) {
                    return;
                }

Don't know how this could happen. In my testfile it's OK.

**wyclef** · 03-03-2016, 05:05 PM

hmmm.... looking at both yours and mine and your new one and it seems they are getting truncated when we post? Actually it looks like this script will work fine with single images I just hadn't set a width and height. That fixes the gray background issue. Wishing there was a way around this because some images I don't set a width and height on.

**Sempervivum** · 03-03-2016, 05:21 PM

Yes, obviously the forum software falsifies the code.

Wishing there was a way around this because some images I don't set a width and height on.

AFAIK your slider adds width and height attribute to the images. Hope that this is sufficient for lazyload.

**wyclef** · 03-03-2016, 07:40 PM

Yes, I believe this is working for the slider. I was just thinking off subject about single images that don't have width and height attribute... say responsive ones that may scale.

**wyclef** · 03-03-2016, 08:02 PM

It seems like I'm not the first one to ask this question --> javascript - Lazy loading with "responsive" images (unknown height) - Stack Overflow

It doesn't seem like if I implement the trick that Isaac is referencing that it solves the single image problem entirely... there is a flash of the placeholder that is like twice the height.

Code:

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
</head>

<div style="width: 600px;">
    <img class="lazy" data-original="http://lorempixel.com/400/200/sports/five" width="2000" height="1000" style="max-width: 100%; height: auto;" />
</div>

<div style="width: 50%; margin-top: 550px;">
    <div id="slides">
        <img class="lazy" data-original="http://lorempixel.com/400/200/sports/ONE" />
        <img class="lazy" data-original="http://lorempixel.com/400/200/sports/TWO" />
        <img class="lazy" data-original="http://lorempixel.com/400/200/sports/THREE" />

        <a href="#" class="slidesjs-previous slidesjs-navigation"><i></i></a>
        <a href="#" class="slidesjs-next slidesjs-navigation"><i></i></a></div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="plugins.js"></script>
<script src="lazyload.js"></script>

<script type="text/javascript">

    function initSlides() {
        $('#slides').slidesjs({
            width: 523,
            height: 337,
            navigation: false
        });
    }
    // lazyload
    $(function () {
        initSlides();
        $("img.lazy").lazyload({
            effect: "fadeIn",
            skip_invisible: false
        });
        $("img.lazyplain").lazyload({
            effect: "fadeIn"
        });
    });

</script>

</body>
</html>

Thread: How can I get JQuery Lazy Load to work with Slide JS?

Thread Tools

Rate This Thread

How can I get JQuery Lazy Load to work with Slide JS?

Users who have thanked Sempervivum for this post:

Tags for this Thread

Posting Permissions