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

【问题标题】：How to delay image load with data URI?如何使用数据 URI 延迟图像加载？
【发布时间】：2011-11-12 01:56:08
【问题描述】：

我正在使用数据 URI 将图像加载一页，并将 script 放在 HTML 的末尾。与图片src使用普通url不同，数据将直接加载到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>

【问题讨论】：

你可以隐藏 div 或图像，一旦脚本加载显示它们，或者使用可见性来保持布局完整
图片可以被隐藏但仍会被加载，这并不能解决延迟加载脚本的问题

标签： javascript performance image loading data-uri

【解决方案1】：

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

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

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

【讨论】：

最后一个 - 将日期 URI 放入一个大字符串数组中 - 尽管使用 JS 携带数据并不优雅，并且站点将关闭 jS 将不会在全部。
您询问了哪些选项，我们只是向您解释。您可以选择最适合您的情况的选项。使用数不胜数的数据 URI 对我来说根本没有多大意义。 Web 浏览器的设计并不能很好地处理这个问题。它们旨在处理大量常规图像 URL 的问题。
当然。它很丑。在将使用数据 URI 的约束下，似乎没有完美的解决方案来异步加载以下脚本。我将中止数据 URI 并考虑其他解决方案来加快图像加载并启用异步脚本加载。