$LazyLoading option not working about slider

[jssor]

Not sure if you are using the latest version (2014.05.06).

To minimize image loads at the beginning, you can set $LazyLoading to 0.

0 means jssor slider will ensure images for current slide.
1 means jssor slider will ensure images for current slide and adjacent slides( prev slide and next slide).
2 means more

As lazy loading image looks like <img src2="...' />, after an image is loading or loaded, it looks like

To test it, you can set '$AutoPlay' of main slider and child sliders to false. After all sliders had been initialized, you can use 'inspect element' to check if some images are stopped from loading by check src property.

[wooama]

I'm using the last version (2014.05.06). The fiddle version wasn't that relevant for the number of initially loaded images, but for the fact that even after all images are loaded, the page still makes http requests to get the same images again and again.

[wooama]

The fact that loads the images over and over again seems to be unrelated to the $LazyLoading option. I replaced src2 with the usual src and it still does that.

[wooama]

Take this as a more complex example: http://www.quinnco.com/index.php?new

As you can see, the main slider is stopped. But still all the images are loaded.

When all the images have loaded, click on a thumbnail to start playing the main slider.
As you see, the images start loading again again.

This is the code:

function init_nested_slider(){
    var nestedSliders = [];
    var nestedSliderOptions = {
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
            $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $ParkingPosition: 0,                              //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 0,                                  //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $DragOrientation: 0,
            $PauseOnHover: 1,
            //$LazyLoading : 1,
            $SlideshowOptions: {                               
            $Class: $JssorSlideshowRunner$,                
            $Transitions: [{ $Duration: 1500, $Opacity: 2 }],           
            $TransitionsOrder: 1
        }
    };
    $.each(subsliders, function (index, containerId) {
        nestedSliders.push(new $JssorSlider$(containerId, nestedSliderOptions));
  });
    var options = {
        $AutoPlay: false,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
        $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
        $AutoPlayInterval: 2000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
        $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3
        //$LazyLoading : 1,
        $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
        $SlideDuration: 300,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
        $MinDragOffsetToSlide: 80,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
        $SlideSpacing: 3,                                   //[Optional] Space between each slide in pixels, default value is 0
        $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
        $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
        $UISearchMode: 0,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
        $PlayOrientation: 2,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
        $DragOrientation: 0,                             //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0), 
        $SlideshowOptions: {                               
            $Class: $JssorSlideshowRunner$,                
            $Transitions: [{ $Duration: 1500, $Opacity: 2 }],           
            $TransitionsOrder: 1
        }
    };

    var jssor_slider1 = new $JssorSlider$("slider1_container", options);

    function OnMainSliderPark(currentIndex, fromIndex) {
        $(".slider-caption[data-slide='" + fromIndex +"']").slideUp();
        $(".slider-caption[data-slide='" + currentIndex +"']").slideDown();
        activate_thumb($(".carousel-container li[data-slide='" + currentIndex +"']"));
        if (nestedSliders[fromIndex].$IsAutoPlaying()) {
            nestedSliders[fromIndex].$GoTo(0);
            nestedSliders[fromIndex].$Pause();
        }
    }

    function OnMainSliderClick(slideIndex) {
        if (nestedSliders[slideIndex].$SlidesCount() > 1) {
            jssor_slider1.$Pause();
            $.each(nestedSliders, function (index, nestedSlider) {
                    nestedSlider.$Pause();
            });
            setTimeout(function(){nestedSliders[slideIndex].$Play();}, 500);
        }
    }

    jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnMainSliderPark);
    jssor_slider1.$On($JssorSlider$.$EVT_CLICK, OnMainSliderClick);
    OnMainSliderPark(0, 0);

    function ScaleSlider() {
            var bodyWidth = document.body.clientWidth;
            if (bodyWidth) {
                    var new_width = Math.max(bodyWidth, 844);
                    jssor_slider1.$SetScaleWidth(new_width);
            }
            else
                    window.setTimeout(ScaleSlider, 30);
    } 

    ScaleSlider();

    if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            $(window).bind('resize', ScaleSlider);
    } 

    $('.carousel_thumb_img').each(function(index) {
        $(this).hover (
            function(){ 
                if (!$(this).closest("li").hasClass("active")) {
                    $(this).fadeTo('fast', 1.00);
                    $(this).css("cursor","pointer")
                } 
            },
            function(){if (!$(this).closest("li").hasClass("active")) $(this).fadeTo('fast', 0.30)}
        )
    });

    $(".carousel-container li").click( function(ev, options){
        jssor_slider1.$GoTo($(this).attr("data-slide"));
        if (!jssor_slider1.$IsAutoPlaying()) { jssor_slider1.$Play(); }
    });
}

This is how the html looks like:

<div u="slides" class="subslider-slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 583px; overflow: hidden;">
                        <div><img u="image" style="width:1300px;" src2="thumb.png.php?x=1300&y=583&type=0&cr_x=0&cr_y=96&cr_zoom=0.74&f=Li4vdXBsb2Fkcy9pbWFnZXMvY21zX3Byb2plY3RzL21vZHVsZV82Mi9wbHVuZ2Vwb29sc3VpdGVzXzQuanBn&output_type=jpg" /></div>
...
</div>

[jssor]

Hi,
I checked your code and tested in firefox, ie, chrome.
It keeps loading in chrome.

there are 2 solutions to fix it.
a. Please set $AutoPlay for main slider to false.
As you are going to control the main slider by thumbnail click, you should disable auto play for main slider.

or

b. Config your server settings to enable client cache for images

[wooama]

It's strange enough that with the $GoTo function doesn't reload images. As long as the image is still in the DOM, I don't really understand why $AutoPlay would load it again and again.

Unfortunately, putting $AutoPlay on false is not an option. If I would trigger click on thumbnails to simulate $AutoPlay, I'm missing the fade transition.

Also, it seems that I get the same behavior in Mozilla too, along with loading all the images at once, even if all the images have only src2.

[wooama]

Removing the $SlideshowOptions stops the continuous loading (when not using src2). Any idea why it goes berserk when they are set?

[jssor]

Good news!

If an image is not cached at client side, chrome will always load it when you create a new image and insert it into document object model.

So, the best solution is to config server settings to enable client cache.

[wooama]

Thank you! :)

[wooama]

Just to help you, maybe I should tell you that with version 15.0 in Mozilla the images don't load continuously, even if the $SlideshowOptions are set.

[jssor]

Yes, you are right. Thanks a lot!
It happens for Chrome only.

[wooama]

Yes, but that's true only for realease 15.0. With 16.0 Mozilla too loads the images continuously.

[jssor]

I see.
Many thanks!