Synchronizing javascript calls

Question

Part of loading an html page I'm working on (with JQuery) involves instantiating several javascript objects, each which adds an image to the page. The object constructor waits for the image to load using $(window).load() gets their dimensions, and scales based on cookie values.

Once the page is loaded (again, using $(window).load()), the main page hides most of the images using .hide(); they'll reappear later.

The problem I'm having is that the main page hides the images before the JS objects can get their dimensions. I need the main page to wait for all of the objects to finish the image manipulation before it hides the images.

Would help to see code you're working with. Sounds like you need to utilize callbacks in your image loading function to trigger the `hide` rather than relying on `$(window).load()`. — kmfk, Oct 16 '12 at 16:07

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

Don't add the images to the page and hide them after they're loaded.

Load them, measure their sizes (see jQuery: how to get the dimensions of a external image?, jQuery callback on image load (even when the image is cached)) and add them to the DOM once they're needed.

edited May 23 '17 at 11:48

Community

1
1

answered Oct 16 '12 at 16:17

Bergi

630,263
148
957
1,375

If you really need to chain your scripts together, show them to us so I can tell you how to adapt them. – Bergi Oct 16 '12 at 16:19

score 1 · Answer 2 · edited May 23 '17 at 11:48

Expanding on @Bergi's answer:

What is commonly done is to render the image elements where you want them, but replace their src with some other 1-pixel dummy image and hold the real source somewhere else (e.g. on a data attribute):

<img src="/img/dummy.png" data-original-src="/img/path/to/real-image.png">

Then, once the page is ready (before it is fully loaded; use jQuery.ready), find all those images and create corresponding external images with the original sources.

For each such external image, once it is loaded (use jQuery's image load callback) you can measure it and whatever you want with its size, and then finally replace the original image's src with its real source, which will be instantaneous since the browser already loaded this image URL:

$('img').each(function() {
   var originalImg = $(this);
   var externalImg = $('<img>').attr('src', originalImg.data('original-src'));
   externalImg.load(function() { 
        // measure, scale, center, and pre-process as you wish
        originalImg.attr('src', externalImg.attr('src'));
        originalImg.data('original-src', null);
   }); // you'll also have to use .complete() here, see links for details
}

This results in images that don't show up until they're fully loaded and you've had a chance to scale (or center, or otherwise pre-process) them.

To my understanding, the images do not exist in the source but are created dynamically: "*Part of loading [the] page […] involves instantiating several javascript objects, each which adds an image to the page*" — Bergi, Oct 16 '12 at 16:36

Synchronizing javascript calls

2 Answers2