最好的处理方法是什么:在 JavaScript 中，对于大小为零的图像，不会触发加载

What is the best way to handle: onload not being triggered for images with size zero in JavaScript?

本文关键字：图像 小为 加载 于大 是什么 方法 处理 JavaScript      更新时间：2023-09-26

为了确保在我们的页面上加载图像，然后进入下一个状态，我们使用了下面提到的onload方法：

image = new Image();
image.onload = function(){
  // go to the next state
};
image.src = image_url;

问题是不会为大小为零的图像触发事件，因此页面保持停止模式并且不会进入下一个状态。

对于大小为零的图像onload未触发功能的问题，处理该问题的最佳方法是什么？

相关问题：

1-新图像（），如何知道图像是否100%加载？

如果您希望进程在图像完成加载或加载失败时继续，则可以将事件处理程序添加到.onerror事件：

var image = new Image();
image.onload = image.onerror = function () { 
    // go to the next state
};
image.src = image_url;

如果您确实想使用 0 大小的文件执行此操作，请尝试使其成为脚本。 0 大小脚本有效。看：

尝试在脚本标记上触发 onload 事件

或者，如果您确实有一些真实的图像，但有些图像"什么都没有"，请使用 1x1 的"clear_pixel.gif"。你也可以用css让它不可见（尽管这样你也不会看到真实的图像），也许有一种方法可以在加载中从js中检测图像的实际大小。

你能给图像一个非 0 的大小，然后使用 position：absolute 将它们放在不可见的页面上吗？ 

height:1px
width:1px
position:absolute
left:-1000000px

（我在这里假设它们是非零大小的实际图像，但是您使img元素的大小为0以使图像不可见。我不太确定是不是这样。

相关文章：