Question

问题

问题是，<img> onerror在IE9中即使图像已正确加载，页面上的图像已经太多也会出现问题。实际上，图片太多100 - 200 images左右1600 x 2300左右。我不能发布一个小提琴因为我没有这样的图像的200个URL所以任何人都感兴趣，我有兴趣在你的本地机器上询问和复制。

测试这个问题可能有点乏味，所以请耐心等待我。我会为此给予一点赏金，因为这很麻烦哈哈。

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

任何图像最好大约1600到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之后的任何事情。

Answer 1

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

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

我建议将旧图像滚出视图后从DOM中删除旧图像。用户一次只能看到一些图像，因此您可以优化页面以提高内存效率（移动用户将不胜感激）。

Answer 2

先生，为什么不禁用onerror

this.onerror=null;

Answer 3

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

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

当图像太多时，IE9会触发img元素onerror事件

3 个答案: