图片太多时IE9触发img元素onerror事件答案

【问题标题】：IE9 triggers img element onerror event when too many images图片太多时IE9触发img元素onerror事件
【发布时间】：2023-04-03 09:24:02
【问题描述】：

问题

问题是<img> onerror 在IE9 中触发，即使图像已正确加载，页面上已经有太多图像。太多的图像实际上在100 - 200 images 附近，在1600 x 2300 附近。我无法发布小提琴，因为我没有 200 个此类图像的 URL，所以任何有兴趣的人，我都可以请求并在您的本地计算机上复制。

测试这个问题可能有点乏味，所以请先生们多多包涵。我会为此付出一点赏金，因为它很麻烦哈哈。

先决条件（编辑：请参阅fiddle）

任何图像最好在 1600 x 2300 左右（我的大约 800KB）和 IE9（还没有测试任何其他 IE，抱歉，也许你可以试试）
将该图像命名为1.jpg 并保存在任何空文件夹中
将该图像复制并粘贴 200 次（100 次可能会这样做，但为了安全起见）。
现在你应该得到像1 - Copy (x).jpg这样的文件名，其中x是0 - 200。
在同一文件夹中，使用以下代码制作一个 html 文件。

代码

<html>
    <head>
        <title>Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                var i = 0;

                $("#btn").click(function() {
                    var str = "";
                    var limit = i + 20;

                    $("div.toBeHidden").hide();

                    str += "<div class='toBeHidden'>"
                    for( ; i < limit && i < 200 ; i++) {
                        str += "<img src='1 - Copy (" + i + ").jpg' alt='Not found' onerror='console.log(\"too bad\");' height='50' width='50'/>";
                    }
                    str += "</div><br/>"

                    $("#container").append(str);
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="Test"/>
        <div id="container">

        </div>
    </body>
</html>

如果您能够复制它，您应该在您的控制台中打印"Too bad" 3rd or 4th time 您按下“测试”按钮。更糟糕的是，在第一个“太糟糕了”之后，触发onerror。

【问题讨论】：

所以每次点击按钮都会添加两张图片，而你点击了 3 或 4 次，意思是 600 到 800 张图片。正确的？我无法复制您的问题。我构建了jsfiddle.net/pQ7Ag/2 来协助解决问题，但没有得到您遇到的结果。在控制台输出图片src，看看刷新结果是否一致。
非常感谢小提琴！每次单击按钮只会添加一个<div> 和20 新图像，并隐藏所有以前的<div>（带有图像）。一旦我在工作场所（从现在起 8 到 10 小时），我会测试这个小提琴，因为我家里没有 IE9。
@JonathanSampson，感谢有关 lorempixel.com 先生的提示，我添加了一个小提琴，我可以在 IE9 中复制它。第 4 次点击后的某些图像无法加载并触发 onerror/ 也许，页面已经充满了图像？ @Progo，我应该可以。但这是一个要求。

标签： javascript html image internet-explorer internet-explorer-9

【解决方案1】：

您的代码 sn-p 中的循环显示 200 次迭代，而不是 20 次，因此在第 3 次或第 4 次单击时，您添加了 500-600 张图像。

我怀疑 IE9 一次允许的资源有限制（可能是 2^9 = 512？）。

我建议将旧图像从 DOM 中删除，一旦它们被滚动到视野之外。用户一次只会看到几张图片，因此您可以优化页面以提高内存效率（移动用户将不胜感激）。

【讨论】：

for( ; i < limit && i < 200 ; i++) { 其实只有20，请再看条件。是的，到目前为止，我发现的部分解决方案涉及从 DOM 中删除它，但不是在滚动上而是基于示例，当包含 <div> 被隐藏时。现在的问题是在js中仍然引用obj的情况下如何释放分配的内存。

【解决方案2】：

先生，你为什么不禁用onerror

this.onerror=null;

【讨论】：

因为我需要它。我只是不希望它在不应该执行的时候执行。

【解决方案3】：

作为一种选择，您可以尝试修改 <img> 元素的 src 属性值，而不是替换整个 DOM 片段来解决内存问题。

对于无限滚动，你也可以重复使用这些片段，只需要在内存中有几个，并在需要时切换。

【讨论】：