时间戳

首页 > 解决方案 > 如何强制加载未在 HTML5 画布中加载的图像？

javascript - 如何强制加载未在 HTML5 画布中加载的图像？

问题描述

let head = new Image();
head.src = "img/head.png";

if(!head.complete)
    console.log('NOT');

在上面的代码中，我第一次加载页面时没有出现在我的日志中，然后当我刷新页面时，在加载图像时没有记录任何内容。如何在第一页加载时强制加载图像？

我已经提到了很多关于 SO 的答案，但到目前为止没有任何帮助。我使用onload了，但图像只是没有在第一次加载时加载，因为我使用head.complete. "head.png?"+getTime(new Date())如果缓存有问题，我什至在图像末尾添加了一个时间戳。但没有运气！

并且所有其他图像都可以完美加载。

标签： javascripthtml5-canvas

解决方案

我假设您的脚本直接在顶级函数 document.ready() 中运行，或者您的脚本在第一个函数中运行的函数中。那么您可以检查以下之一：

如果满足以下任一条件，则认为图像已完全加载：

src 和 srcset 属性均未指定。srcset 属性不存在，并且 src 属性在指定时是空字符串 ("")。图像资源已完全提取并已排队等待渲染/合成。图像元素先前已确定该图像完全可用并且可以使用。图像“破碎”；也就是说，由于错误或图像加载被禁用，图像无法加载。值得注意的是，由于图像可能是异步接收的，所以在脚本运行时完成的值可能会发生变化。

另外我假设您将 head 变量附加到 or body 元素。如果图像链接正常，您可以在浏览器控制台中检查（如果您跳过链接，它将显示图像）

推荐阅读