jQuery .load() callback occuring before images load

Question

I am trying to have an image(div) overlay the entire view port while ajax call is under way using the .load() method. The overlay should fade away once the load is complete. However, even by using the load callback, the overlay fades away before the images load. With a slower internet connection the user can see the images loading one by one.

The current WIP can be found at (click work to see the bug).

My load Function

function loadContent(link) {
var loadUrl = $(link).attr("href");

showOverlay(function () {
    $('#holder').load(loadUrl, function () {
        $('#content').scrollTop(0)
         hideOverlay();
    })
  });
};

The overlay Functions

function showOverlay(callback) {
   $('html').addClass('overlay-visible');
   $('#overlay').fadeIn(500, callback);
};


function hideOverlay(callback) {
  $('html').removeClass('overlay-visible');
  $('#overlay').delay(100).fadeOut(500, callback);
};

Thanks in advance to anyone that can help me with this!

change the .load() to .ajax() and add async:false it seems to me. — Mark Schultheiss, Feb 13 '13 at 14:03
@MarkSchultheiss That's horrible advice. Ajax should be asynchronous unless there's a really good reason for it not to be. — JJJ, Feb 13 '13 at 14:05
@Juhana - generally I would agree, why it is a comment not an answer... — Mark Schultheiss, Feb 13 '13 at 14:15
I think if you preload your images, your problem will be solved. https://stackoverflow.com/questions/476679/preloading-images-with-jquery This link may help. — Mukul Kapoor, Feb 13 '13 at 14:06
Thanks for the advice Mukul. Would you advise that I preload the images initially when the site is opened up or after the event (user clicks work link)? — user1512126, Feb 13 '13 at 14:32
Load all your images as soon as the site is loaded, otherwise delay will again be a problem :) — Mukul Kapoor, Feb 13 '13 at 16:09

score 1 · Answer 1 · answered Feb 13 '13 at 14:16

1

When you do an AJAX load using jQuery's load() method, things happen in this order (see http://api.jquery.com/load/ ) :

load() loads external HTML by AJAX
once this HTML is loaded, it replaces the content of the jQuery object – here, $('#loader')
finally the callback function is called

The problem here is that your HTML contains images, which are in turn downloaded from the Internet. So here your images start to download after #2 above, pretty much at the same time that the callback is called.

The result is that the callback is pretty much instantaneous, whereas the images take a moment to load. A solution would indeed be to preload the images, to avoid this effect.

answered Feb 13 '13 at 14:16

Nick

72
1
2

Thanks Nick. Would you advise me preloading the images when the initial site is loaded or wait until a user has actually clicked the "work" navigation item? Am I safe to assume the ladder would end up with the same result I have now? – user1512126 Feb 13 '13 at 14:29
I guess the latter would indeed yield more or less the same result. I would probably simply display an animated (preloaded) loading GIF while the images are loaded and then finally display the images. Something like `$('#holder').load(function(){ var imgcount = $('#holder img').length; $('#holder img').load(function(){ imgcount--; if (imgcount == 0) { /* now they're all loaded, let's display them! */ } }); });` – Nick Feb 13 '13 at 14:55
Nick, In a your solution appears to have worked. However, by using it I have run into a snag. If I visit the work page it waits to load images then displays the content. If I leave the work page and revisit later, it doesn't work. Firebug shows it loading everything but the overlay nevers goes away. Something appears to be hanging prior to the hideOverlay(); function gets executed if the loadContent(); function has been previously ran for that respected page. www.chadis.me Thanks in advance Nick! – user1512126 Feb 14 '13 at 19:13

score 0 · Answer 2 · answered Feb 13 '13 at 14:08

0

  var img = new Image();
  var img_src = ''; // your image url here.
  img.onload = function() {
    //operate your div here.
  };
  img.src = img_src;

answered Feb 13 '13 at 14:08

LisztLi

242
1
2
6

LisztLi, the problem I have with this is I'll have upwards of a dozen images (just on the work page) that will need preloaded. Would that mean I need to copy this code 12 times to reference the url of each image? I'm thinking this would be hard for me to manage in regards to scalability and maintainability. Thoughts? – user1512126 Feb 13 '13 at 14:34
If you do want to do sth after all images successfully loaded, yes. IMO, in your case, just set a counter and invoke the callback after the counter is 12; increase the counter otherwise. – LisztLi Feb 13 '13 at 16:25
@user1512126 no need. ``` var cnt = 0; img.onload = function() { cnt += 1; if (cnt == 12) { // ur job here } }; ``` – LisztLi Mar 22 '18 at 09:22

jQuery .load() callback occuring before images load

2 Answers2