如何使用数据URI延迟图像加载？

Question

我使用数据URI将图片加载到一页，然后将script放在HTML的末尾。与使用图像src的普通网址不同，数据将直接加载到html网页的HTTP请求中。

因此，script将在页面末尾加载很晚，因为我通过这种方式加载了数百个图像数据。

我想先加载脚本或者使用imate加载异步，有没有办法延迟图像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

这个答案相当简单。如果您不希望图像与页面加载同步加载，则不要使用内嵌图像数据URI。您将获得为网页编码的行为。

远程图像URL（非数据URI）以异步方式加载，您可以在加载时运行脚本。

或者，您可以将所有数据URI放入页面中的大字符串数组中，然后在完成其他javascript后使用javascript从数据URI构建图像对象。