Question

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().

Answer 1

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');
  }
});