I'm trying to show a loading image until a div content is fully loaded.

1. First hide .main-slider div
2. Add class .loading to .main-slider: <div id="main-slider loading"></div>
3. When .main-slider div elements has loaded
4. .loading will be remove
5. Then fade in .main-slider div

html

 <div class='sly-main-slider'>
 <div> <!-- Content -->
 <img src="-205093.jpg"/>
 </div>
 </div> <!--sly-main-slider end-->

jquery tries, here's a fiddle:

// when user browses to page
$(".sly-main-slider div").hide();
$(".sly-main-slider").addClass("loading");

$(".sly-main-slider div").load(function() {
  // Handler for .load() called.
  $(".sly-main-slider div").show();
  $(".sly-main-slider").removeClass("loading");
});

I'm trying to show a loading image until a div content is fully loaded.

1. First hide .main-slider div
2. Add class .loading to .main-slider: <div id="main-slider loading"></div>
3. When .main-slider div elements has loaded
4. .loading will be remove
5. Then fade in .main-slider div

html

 <div class='sly-main-slider'>
 <div> <!-- Content -->
 <img src="http://4.bp.blogspot./-gk6rnMRH9qE/VXJ40BWuC4I/AAAAAAAABZs/BWesiVwBgfg/s1050/camera-girl-nikon-photography-Favim.-205093.jpg"/>
 </div>
 </div> <!--sly-main-slider end-->

jquery tries, here's a fiddle:

// when user browses to page
$(".sly-main-slider div").hide();
$(".sly-main-slider").addClass("loading");

$(".sly-main-slider div").load(function() {
  // Handler for .load() called.
  $(".sly-main-slider div").show();
  $(".sly-main-slider").removeClass("loading");
});

• javascript
• jquery
• html
• load

Share Improve this question Follow edited Sep 30, 2015 at 7:29 Félix Adriyel Gagnon-Grenier 8,8931010 gold badges5757 silver badges6767 bronze badges asked Jul 15, 2015 at 13:38 AaribaAariba 1,19455 gold badges2323 silver badges5454 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

In your code you are trying to attach the onload event to a div. That won't work. You have attach it to the window element like this

$(".sly-main-slider div").hide();
$(".sly-main-slider").addClass("loading");

$(window).load(function() {
   // Handler for .load() called.
   $(".sly-main-slider div").show();
   $(".sly-main-slider").removeClass("loading");
});

Reading from your ments, you want to control only some parts of the page that load images, right? If you are looking for just checking those images you could take a look at http://imagesloaded.desandro./

Easy steps:

• Include jQuery
• Include Imagesloaded script

• Fire it up like:

  $(".sly-main-slider div").hide();
  $(".sly-main-slider").addClass("loading");
  $('.sly-main-slider div').imagesLoaded()
   .done( function( instance ) {
       $(".sly-main-slider div").show();
       $(".sly-main-slider").removeClass("loading");
   });
  

Hope it helps

Try this: Start your img with an empty src, then change the src of your image async and add a callback when the img ('src') attribute has pletely changed

$(".sly-main-slider div img").attr('src', "#");
$(".sly-main-slider").addClass("loading");
$(".sly-main-slider div").hide();

$(".sly-main-slider div img").load(function () {
    $(".sly-main-slider div").show();
    $(".sly-main-slider").removeClass("loading");
}).attr('src', "http://lorempixel./g/1000/1000/");

.loading {
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 2000;
    background: url(http://1.bp.blogspot./-nfXo9GWbDtM/VOn0vr4yLMI/AAAAAAAABCA/dDNgd7_QCFo/s1600/block-loader.gif) no-repeat center center;
    height: 32px;
    width: 32px;
}

.loading:after {
  position: absolute;
  top: 8px;
  left: 40px;
  content: 'Loading...';
} 
body {
    position: relative;
    display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='sly-main-slider'>
    <div>
        <img src="http://lorempixel./g/1000/1000/" alt="" />
    </div>
</div>
<!--sly-main-slider end-->