Waiting for Image to Load in JavaScript

Waiting for image to load in JavaScript

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

Note that it's important to do it in the order above: First attach the handler, then set the src. If you do it the other way around, and the image is in cache, you may miss the event. JavaScript is run on a single thread in browsers (unless you're using web workers), but browsers are not single-threaded. It's perfectly valid for the browser to see the src, identify the resource is available, load it, trigger the event, look at the element to see if it has any handlers that need to be queued for callback, not see any, and complete the event processing, all between the src line and the line attaching the handler. (The callbacks wouldn't happen between the lines if they were registered, they'd wait in the queue, but if there aren't any, the event isn't required to wait.)

Wait for image loading to complete in JavaScript

Personally I hate using while()... I think the easiest way to do it, is using event listeners.

var img = new Image;
img.addEventListener("load", function () {

//Img loaded

});
img.src= e.target.result;

Wait for image to load before proceeding with for loop

The calls are asynchronous. So you either need to use async/await with a promise or you need to make a queue and pop off an array.

(function() {
  const elems = Array.from(document.querySelectorAll('.previewImg[data-stylesoon]'));

  function loadNext() {
    if (!elems.length) {
      console.log('done');
      return;
    }
    const elem = elems.pop();
    const url = elem.dataset.stylesoon;
    const img = document.createElement("img");
    img.onload = function() {
      elem.style.backgroundImage = `url('${url}')`;
      loadNext();
    };
    img.onerror = loadNext;
    img.src = url;
  }

  loadNext();
}());

div {
  width: 200px;
  height: 200px;
}

<div class="previewImg" data-stylesoon="https://placekitten.com/200/200"> </div>
<div class="previewImg" data-stylesoon="https://placekitten.com/200/300"> </div>
<div class="previewImg" data-stylesoon="https://placekitten.com/200/400"> </div>
<div class="previewImg" data-stylesoon="https://placekitten.com/300/500"> </div>

JavaScript waiting until an image is fully loaded before continuing script

Maybe this will help:

currentimage.onload = function(e){
    // code, run after image load
}

If it is necessary to wait for the image to load, the following code will load the next image (currentIndex is your "img" variable):

var loadImages = function(imageURLarray, currentIndex){
    if (imageURLarray.length == 0 || imageURLarray.length == currentIndex) return false;
    if (typeof currentIndex == 'undefined'){
       currentIndex = 0;
    }
    // your top code
    currentimage.onload = function(e){
        // code, run after image load
        loadImages(imageURLArray, currentIndex++);
    }
}

Instead of a "for" loop, use for example this function:

loadImages(imageURLarray);

Waiting for images to load after replacing div

You could create a JS img object and use the onload event of that image to trigger your own javascript code that does some bookkeeping and when all images have fired you fire your load event.

var $imgs = $('img'), total = $imgs.length, sum = 0;
$imgs.each(function(){
    var img = new Image();
    img.src = $(this).attr('src');
    img.onload = function() {
        sum++;
        if (sum === total) {
          // all images have loaded, so you can fire your event.
        }
    }
});

---

Related Topics