CODEWITHSUNDEEP
jquery
NaOH
NaOH

Reputation: 459

Hide "loader" div when first image in stack loads?

I'm using a div that covers the page content until the first image in a set for a slideshow loads. The code I'm using to hide this div is as follows, but it's not working:

$(function() {
  $('.slide').first(function() {
    $(this).load(function() {
      $('#loader').fadeOut('slow');
    });
  });
});

Any idea why? The "loader" div doesn't hide even after the entire page loads. I have had some success running $('#loader').fadeOut('slow'); on (window).load().

Upvotes: 0

Views: 343

Answers (1)

Pastor Bones
Pastor Bones

Reputation: 7351

Your images are being loaded via ajax and are not present when the DOM first loads. Try hiding the loading image after the first image is added to the DOM.

$.each(images, function(index) {
  $('#slideshow').append('<div class="slide" style="background-image:url(' + this + ');"></div>');
  if(index === 0){
    $('#loader').fadeOut('slow');
  }
});

Upvotes: 1

Related Questions