Waiting for image to load in JavaScript

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

More Related Contents:

  1. How to cancel an image from loading
  2. Wait for image to be loaded before going on
  3. how to proportionally scale a div with images inside?
  4. changing source on html5 video tag
  5. How to resize images proportionally / keeping the aspect ratio?
  6. How do I load binary image data using Javascript and XMLHttpRequest?
  7. How to silently hide “Image not found” icon when src source image is not found
  8. How to save a base64 image to user’s disk using JavaScript?
  9. How to display image with JavaScript?
  10. Using raw image data from ajax request for data URI
  11. Can I get image from canvas element and use it in img src tag?
  12. JS – get image width and height from the base64 code
  13. How to stretch images with no antialiasing
  14. How do image preloaders work?
  15. rotate a .gif image on google maps api v3?
  16. How to set the image quality while converting a canvas with the “toDataURL” method?
  17. React-Native: Convert image url to base64 string
  18. JavaScript loading progress of an image
  19. Javascript : get src and set as variable?
  20. Image brightness detection in client side script
  21. Copy Image to Clipboard from Browser in Javascript?
  22. Sending one AJAX request at a time from a loop
  23. Using image.complete to find if image is cached on chrome?
  24. How to create a new img tag with JQuery, with the src and id from a JavaScript object?
  25. Load external JS from bookmarklet?
  26. Regex JavaScript image file extension [closed]
  27. IIS 7.5 no images css js showing
  28. Opening images on NodeJS and finding out width/height
  29. How should I crop an image at client side using jcrop and upload it?
  30. Images not showing up on PDF created from HTML

Leave a Comment