How to delay image load with data URI?

Question

I am using data URI to load images one page and I put script at the end of my HTML. Unlike use normal url for image src, the data will be directly loaded in the HTTP request for the html page.

Thus, the script will be loaded very late at the end of the page as I have hundreds of image data loaded through this way.

I want to load the script either earlier or asynchronous with the load of imate, is there a way to delay the load of image data?

<div>
  <img src="data:image/png; base64, .........." alt="">
  <img src="data:image/png; base64, .........." alt="">
  <img src="data:image/png; base64, .........." alt="">
</div>
<script type="text/javascript" src="my-script.js"></script>

Answer 1

This answer is fairly straightforward. If you don't want the images loaded synchronously with the page load, then don't use inline image data URIs. You are getting the behavior that you have coded your web page for.

Remote image URLs (non-data URIs) load asychronously and you can run scripts while they are loading.

Or, you could put all the data URIs into a big string array in your page and then use javascript to construct the image objects from the data URIs after you've done your other javascript.