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

Question

我正在使用数据 URI 将图像加载到一页，然后放在scriptHTML 的末尾。与使用普通 url 的 image 不同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 构造图像对象。