How to do a process after completion of another one in JavaScript

Question

I want to add an image by Javascript, then calculating the html element width as

window.onload=function(){
document.getElementById('x').addEventListener('click', function(e){
    var el = document.getElementById('xx');
    el.innerHTML = '<img src="img.jpg" />';
    var width = el.offsetWidth;
    .....
   }, false);
}

but since JavaScript conduct all processes simultaneously, I will get the width of the element before loading the image. How can I make sure that the image has been loaded into the content; then calculating the element width?

UPDATE: Thanks for the answers, but I think there is a misunderstanding. img src="img.jpg" /> does not exist in the DOM document. It will be added later by Javascript. Then, when trying to catch the element by Id, it is not there probably.

Not exactly the load event, see http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded — Niels V, Jun 04 '13 at 22:29

score 2 · Answer 1 · answered Jun 04 '13 at 22:27

2

You can give the img an ID and do the following :-

var heavyImage = document.getElementById("my-img");//assuming your img ID is my-img
heavyImage.onload = function(){
    //your code after image is fully loaded
}

answered Jun 04 '13 at 22:27

pvnarula

2,623
15
20

Thanks for the answer, but as I updated the question, the image element comes from Javascript event, and is not part of the DOM document. – Googlebot Jun 04 '13 at 22:47
How it will be coming from JS event? Can you elaborate? – pvnarula Jun 04 '13 at 22:50
I added a new answer. Please check. – pvnarula Jun 04 '13 at 23:06

score 1 · Answer 2 · answered Jun 04 '13 at 22:26

1

This is untested, but if you add the image to the DOM, set an onload/load event-handler and then assign the src of the image, the event-handling should fire (once it's loaded) and allow you to find the width.

This is imperfect, though, since if the image is loaded from the browser's cache the onload/load event may not fire at all (particularly in Chromium/Chrome, I believe, though this is from memory of a bug that may, or may not, have since been fixed).

answered Jun 04 '13 at 22:26

David says reinstate Monica

230,743
47
350
385

1

The 2nd paragraph should be heeded: onload is particularly icky. I think I've seen a jQuery plugin designed to try and make it behave better. – user2246674 Jun 04 '13 at 22:30

score 1 · Answer 3 · answered Jun 04 '13 at 22:32

For the chrome bug you can use the following:-

var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';//create a blank source

var tImg = document.getElementById("my-img");//get the image
var origSrc = tImg.src;//get the original src
tImg.src = BLANK;//change the img src to blank.
tImg.src = origSrc;//Change it back to original src. This will lead the chrome to load the image again.
tImg.onload= function(){
    //your code after the image load
}

score 1 · Accepted Answer · answered Jun 04 '13 at 23:05

1

window.onload=function(){
     document.getElementById('x').addEventListener('click', function(e){
        var el = document.getElementById('xx');
        var img = new Image();//dynamically create image
        img.src = "img.jpg";//set the src
        img.alt = "alt";
        el.appendChild(img);//append the image to the el
        img.onload = function(){
           var width = el.offsetWidth;
        }
    }, false);
}

answered Jun 04 '13 at 23:05

pvnarula

2,623
15
20

This exactly what I needed. Thanks! – Googlebot Jun 04 '13 at 23:15

score 0 · Answer 5 · answered Jun 04 '13 at 23:12

You can use a library called PreloadJS or you can try something like this:

//Somewhere in your document loading:
loadImage(yourImage, callbackOnComplete);

function loadImage(image, callbackOnComplete){

   var self = this;
   if(!image.complete)
      window.content.setTimeout(
         function() { self.loadImage(image, callbackOnComplete)}
      ,1000);
   else callbackOnComplete();
}

I did this when I worked with images base64 which delay on loading.

How to do a process after completion of another one in JavaScript

5 Answers5