Can't get lazy-load to work

[Deleted user]

Hi,

Sorry to write this issue you must be sick and tired of this issue that keeps coming up! I have read all the past issues in this github and comments in Stack Overflow.

From what you have written you need to do two things to turn on Lazy-Load:

1. Set the $LazyLoading - it is default at 1.
2. Add data-src2 to all the src tags.

I am using the 'jQuery Banner Rotator - Jssor Slider' Example. Found here: https://github.com/jssor/slider/blob/master/demos-jquery/banner-rotator.html

I have the following code:

var jssor_1_options = {
      $AutoPlay: 1,
      $LazyLoading: 0,
      $SlideshowOptions: {
        $Class: $JssorSlideshowRunner$,
        $Transitions: jssor_1_SlideshowTransitions,
        $TransitionsOrder: 1
      },
      $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$
      },
      $BulletNavigatorOptions: {
        $Class: $JssorBulletNavigator$
      }
};

and

<div>
  <img data-u="image" data-src2="https://www.example.com/slider/01.jpg" width="1081" height="281" alt="x" />
</div>

<div>
  <img data-u="image" data-src2="https://www.example.com/slider/02.jpg" width="1081" height="281" alt="x" />
</div>

... etc.

However, when I test the webpage using Lighthouse, it is clearly not doing anything! See screenshot, the 'Time to Interactive' should be green and a lot less.

Question:

Am I doing something wrong with the above code and need to add extra things to turn on and make the lazy-loading work?

Look forward to any help you can give, thanks in advance.

[Deleted user]

Going to close this issue as I have found the solution now:

Solution:

Remove this bit of code:

            /*#region responsive code begin*/

            var MAX_WIDTH = 980;

            function ScaleSlider() {
                var containerElement = jssor_1_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {

                    var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                    jssor_1_slider.$ScaleWidth(expectedWidth);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }

            ScaleSlider();

            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*#endregion responsive code end*/

Gives this result:

[jssor]

I tested again with the full width slider with $LazyLoading: 0.
It will load 002.jpg when it moves to the second slide.