Should setting an image src to data URL be available immediately?

by

As no one has yet found any specifications about how this is supposed to behave, we will have to be satisfied with how it does behave. Following are the results of my tests.

            | is image data usable right  | does onload callback set after src
            |     after setting src?      |   is changed still get invoked?
------------+-----------------------------+-------------------------------------
Safari  5   |             yes             |                  yes                
------------+-----------------------------+-------------------------------------
Chrome  8   | **no** (1st page load), but |                  yes                
FireFox 3.6 |  yes thereafter (cached)    |                                     
------------+-----------------------------+-------------------------------------
IE8         |    yes (32kB data limit)    |                  yes         
------------+-----------------------------+-------------------------------------
IE9b        |             yes             |                 **no**              
------------+-----------------------------+-------------------------------------

In summary:

  • You cannot assume that the image data will be available right after setting a data-uri; you must wait for the onload event.
  • Due to IE9, you cannot set the onload handler after setting the src and expect it to be invoked.
  • The recommendations in “Playing it Safe” (from the question above) are the only way to ensure correct behavior.

If anyone can find specs discussing this, I will happily accept their answer instead.

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. How do I make two images fade in/out repeatedly? [closed]
  3. how to proportionally scale a div with images inside?
  4. Is there any way to specify a suggested filename when using data: URI?
  5. Programmatically change the src of an img tag
  6. Render HTML to an image
  7. Resize image with javascript canvas (smoothly)
  8. Browser/HTML Force download of image from src=”data:image/jpeg;base64…”
  9. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  10. how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]
  11. Convert HTML to data:text/html link using JavaScript
  12. How to silently hide “Image not found” icon when src source image is not found
  13. Dynamically resizing Image-maps and images
  14. How to save a base64 image to user’s disk using JavaScript?
  15. How to display image with JavaScript?
  16. Detecting WebP support
  17. Can I get image from canvas element and use it in img src tag?
  18. How do image preloaders work?
  19. How do I abort image load requests without using window.stop()
  20. Make image fill div completely without stretching
  21. img onload doesn’t work well in IE7
  22. How to download a base64-encoded image?
  23. How to flip images horizontally with HTML5
  24. JavaScript loading progress of an image
  25. Change image in HTML page every few seconds
  26. JavaScript: Get image dimensions
  27. createImageBitmap alternative on Safari
  28. How to bind img src to data in Vue
  29. Center an Image vertically and horizontally using CSS
  30. canvas- Cropping images in different shapes

Leave a Comment