图片加载完成后的图片onload事件

Question

图片加载完成后的图片onload事件

6

我有一个脚本，它在页面上的所有图片上附加了 onload 事件处理程序，但是由于它是 GreaseMonkey 脚本，所以它只能在图片加载完成后运行，因此有些图片可能已经加载完成，是否有一种方法可以在图片已经加载完成时触发 onload 事件？

- Bugster

这个解决方案是次优的。如果您已经加载了图像，为什么还要重新附加它并等待另一个加载呢？这会使您的网站变慢。 - Bojidar Stanchev

你是否考虑过将一些代码内联到图像数据集中以设置变量，表示图像加载已完成？然后在脚本开始时检查所有图像的数据集变量，并仅处理尚未加载的图像的onload事件。如果需要更多澄清，我可以写一个完整的答案。 - Bojidar Stanchev

3个回答

0

这是一个onload事件。我没想到这个事件会触发超过一次。

你可以将你的脚本附加到body / document的onload事件上，然后循环遍历所有的图像并附加你的事件处理程序。

- James

那个能用，但页面加载很慢，图片需要尽快更换。 - Bugster

另一个选择是在页面加载完成之前，但图像已经加载完成时，将事件处理程序批量附加到图像上，通过直接将脚本包含到页面中。不确定这是否适用于Greasemonkey。 - James

我尝试过这样做，但有些图像会在我添加脚本之前加载。 - Bugster

-1

我刚遇到了同样的问题，然后通过谷歌找到了这里。

我不想使用jQuery，所以我寻找了另一个解决方案。最终，在我的情况下，我只是在设置正确的图像“src”之前将图像的“src”属性更改为任何虚拟图片（例如1pix.png），以强制重新加载每个图像。当然，如果您有大型图像和/或经常加载图像，这不是一个好主意...但在我的情况下，我想这没问题，我只需要加载一次大实际图像（此外，我认为底层浏览器缓存机制避免了真正的图像重新加载...）。

希望它能帮助其他人！

PS：这似乎接近@Bugster的解决方法，但我真的没有理解它！

- xav

那么你已经加载了图片并强制刷新了吗？你能看出问题在哪里吗？ - Bojidar Stanchev

@BojidarStanchev 我想您可能误解了：我没有“图片”（复数）被加载。只有一张（微小的）图片被加载，然后当我想强制onload时，我才会加载真正的图片。 - xav

我同意，这并不是最优的方法。这就是为什么我的结论在我的答案中是“在我的情况下，我想这样做没问题”。这也是为什么我在初始图像中使用了一个1像素的图片（在我的回答中我提到了“例如1pix.png”），这样额外的带宽应该只有几个字节。所以，除了少量的额外带宽（可能会被浏览器缓存），这是一种快速、简单（和肮脏，我同意！）的强制“onload”事件的方法，更像是一种hack/权宜之计而非解决方案。 - xav

我明白，我也希望你能理解我的恶意——新手可能会被你的解决方案误导并在错误的地方使用它。 - Bojidar Stanchev

1

同意。没问题，我只是有点难以理解你的（好）观点。也许下次尝试从一开始就更明确和清晰一些；-) - xav

显示剩余6条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anthony Grist · Accepted Answer

如果您不反对使用像jQuery这样的框架，那么有一个triggerHandler()函数可以满足您的需求。

您需要进行测试以检查图像是否已在脚本中加载（应该能够使用Google找到如何执行此操作的详细信息）- 如果没有加载，则只需附加onload事件处理程序；如果已经加载，您可以附加onload事件处理程序，然后使用jQuery的triggerHandler()函数触发它，或者执行将由onload事件处理程序执行的代码/函数-哪种方法最简单可能取决于您的onload事件处理程序执行的操作。