检测图像何时加载的原生 JavaScript [关闭]答案

【问题标题】：Native JavaScript to detect when images are loaded [closed]检测图像何时加载的原生 JavaScript [关闭]
【发布时间】：2012-02-21 16:18:28
【问题描述】：

我正在编写一个 JS '幻灯片'（这不是普通的幻灯片：图像变化很快，因此必须预先加载），我希望在图像为 preloading 时打开 loader .
为此，我想我需要检测每个图像的加载时间（有 36 个）。
现在我通过将标签附加到幻灯片的主要div 来添加图像（并删除默认的静态图像，没有 JS 的用户可以看到），但是如果您认为有更好的方法，请告诉我。然后它们会同时显示给用户。
是否有跨浏览器的“本机”方式来检测图像何时加载？
谢谢你，StackOverflow！

我想我找到了一个可以接受的解决方案on this site。不过，如果您能向我指出任何错误或改进脚本的方法，我会很高兴！
我确实看到他遗漏了所有;...

【问题讨论】：

How can I determine if an image has loaded, using Javascript/jQuery?的可能重复
我想我在这个网站上找到了一个可以接受的解决方案（虽然我还没有测试过）：javascriptkit.com/javatutors/preloadimagesplus.shtml。无论如何感谢您的回答！

标签： javascript html image preloader

【解决方案1】：

使用图片加载事件：

<img src="..." onload="foo()" />

【讨论】：

感谢您的回答。这样做的问题是我需要某种方式“暂停”生成<img> 标签的循环，直到该图像已加载，以确保在启动之前 all 图像已完全加载'幻灯片'

【解决方案2】：

试试这样的

<script type="text/javascript">
    <!--//--><![CDATA[//><!--
        var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            "http://domain.tld/gallery/image-001.jpg",
            "http://domain.tld/gallery/image-002.jpg",
            "http://domain.tld/gallery/image-003.jpg"
        )
    //--><!]]>
</script>

【讨论】：