Jssor Content slider loading all the images at once

Question

I am using Jssor content slider with fade effect both for caption and images. But when the page loads all of the images load at once over the background image which looks really very bad. I have even applied loading part to it, but its making any difference.

Please if any one could help me, in this so that all images do not load at once rather images are loaded one by one.

Here is the slider code :

<div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;"> 
    <!-- Jssor Slider Begin -->
    <div id="slider1_container" > 

    <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
                top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
            <div style="position: absolute; display: block; background: url(images/AjaxLoader.gif) no-repeat center center;
                top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
        </div>

      <!-- Slides Container -->
      <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 900px;
                    height: 477px; overflow: hidden;">
<!-- here all the slides div appears -->
</div>
</div>
</div>

Added this in script

var _SlideshowTransitions = [
    //Fade
    {$Duration: 900, $Opacity: 2, $Brother: { $Duration: 1200, $Opacity: 2} }
   ];

var options = {
                $ShowLoading:true,
                $AutoPlay: true, 
                $Fade: true, // for fade 
                $AutoPlayInterval: 4000,                            
                $PauseOnHover: 1,                                   
                $ArrowKeyNavigation: true,                          
                $SlideDuration: 500,        
                $MinDragOffsetToSlide: 20,
                $SlideSpacing: 0,                                   
                $Cols: 1,                                  
                $Align: 0,                                
                $UISearchMode: 1,                                   
                $PlayOrientation: 1,                                
                $DragOrientation: 1,                                
                $SlideshowOptions: {                                
                    $Class: $JssorSlideshowRunner$,                 
                    $Transitions: _SlideshowTransitions,            
                    $TransitionsOrder: 1,                           
                    $ShowLink: true                                    
                  },
              };

Answer 1

Added a new class in this div :

<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 900px;
                    height: 477px; overflow: hidden;">

like this

<div u="slides" class="slider-common" style="position: absolute; left: 0px; top: 0px; width: 900px;
                    height: 477px; overflow: hidden;">

And then added a css :

.slider-common
        {
            left:-1100px;
            position:absolute;
        }

And also added lazy loading in the script :

var options = {
    ...(with all other options),
    $LazyLoading: 0
};

and it solved my issue. I hope it helps.