在 Internet Explorer 中更改 src 值时无限循环答案

【问题标题】：Endless looping when src value is changed in Internet Explorer在 Internet Explorer 中更改 src 值时无限循环
【发布时间】：2016-02-13 19:37:25
【问题描述】：

我在 Internet Explorer 中遇到了一些 javascript 问题。

它在其他浏览器中运行良好。

我有以下方法，它改变图像的 src 属性，当发生这种情况时，应该开始下载该图像。见下文：

for (var i = 0; i < imagesStartedDownloading.length; i++) {
    if (imagesStartedDownloading[i] == false && responseItems[i] == true) {
        console.log("image", i);
        var url = baseurl + "/ImageDownload/?imageName=" + hash + "_" + imageDegrees[i] + ".jpg" + "&r=" + Math.random();
        imagesStartedDownloading[i] = true;
        images.eq(i).attr("src", url);
    }
}

问题在于，在更改此属性时，Internet Explorer 会开始无限循环下载图像。请注意，我在 for 循环中放置了一个 console.log。我可以确认这个 for 循环不会在 endles 循环中运行。对于应该下载的每个图像，它只运行一次。所以这不是问题。

实际上可以在此页面上看到该行为：http://www.energy-frames.dk/Konfigurator。按 F12 并检查网络选项卡。对主页上的图像进行更改，以便开始下载新图像，例如Bredde（英文宽度），见下文：

当进行此更改时，新图像会无限循环下载（几乎每次在 IE 中都会发生）。请参阅下面您可以更改的内容

我确实花了很多时间在这方面进行调试，但我不明白为什么它在 IE 中的行为如此，但在所有其他浏览器中却不然。

那么有人知道为什么会这样吗？或者对我可以尝试什么有一些建议？编辑：

@gxoptg 我已经尝试过你的建议。像这样使用“javascript:void 0”：

var newimg = $("<img class='rotator" + (isMainImage ? " active" : "") + "' src='javascript:void 0' />");

还有这个：

img.attr("src", "javascript:void 0");

给我这个错误：

另一方面，如果我完全删除行 img.attr("src", ""); 在 imgLoadError 方法中，我看到图像不是在无限循环中下载的。另一方面，它们不显示。那我是不是用 javascript:void 0 错了？

当我执行以下操作时：

img.attr("src", "void(0)");

然后没有无限循环，但图像不会出现在 IE 中 - 在 chrome 中仍然可以正常工作。

【问题讨论】：

您能否也分享一下图像变量被投射、使用等的代码，以便我有一个更好的主意，如果不分享文件的名称，因为您的脚本文件夹中有很多.谢谢。
你试过这个stackoverflow.com/questions/5775469/… 吗？
你试过img.setAttribute("...", "...")或img.src = "..."

标签： javascript html image internet-explorer

【解决方案1】：

原因如下：

for (var i = 0; i < totalnumberofimages; i++) {
    var url = "";

    var isMainImage = i == currentDragImg;
    var newimg = $("<img class='rotator" + (isMainImage ? " active" : "") + "' src='' />");
    newimg.on("error", imgLoadError);
    newimg.on("load", imgLoaded);
    imgcontainer.append(newimg);
}

注意var newimg = $(...) 行。在 Internet Explorer 中，在图像上设置一个空的 src 属性会触发 error 事件。由于该错误，调用了imgLoadError 函数。它看起来像这样：

function imgLoadError(e) {
    var img = $(e.currentTarget);
    var imgSrc = img.attr("src");

    if (imgSrc.length > 0 && img.width() <= 100) {
        setTimeout(function () {
             var imgUrl = img.attr("src");
             img.attr("src", "");
             img.attr("src", imgUrl);
        }, 200);    
    }
}

在此函数中，您运行img.attr("src", "")，它设置空的src 属性，触发error 事件，并再次调用imgLoadError 函数。这会导致无限循环。

为了防止错误（以及因此的无限循环），请将图像源设置为"javascript:void 0"，而不是在两个代码段中的""。此来源有效，应该可以正常工作。

（根据cmets，所有代码都位于/Assets/Scripts/directives/image.rotation.directive.js文件中。）

【讨论】：

@user1093774：快速思考：尝试将img.attr("src", "javascript:void 0"); 替换为img.removeAttr("src")。这有帮助吗？
这个img.removeAttr("src");的组合而这个 var newimg = $("");给了我一个无限循环。
@user1093774：我的意思是，写以下内容：var newimg = $("<img class='rotator" + (isMainImage ? " active" : "") + "' src='javascript:void 0' />"); 在第一个代码段中，var imgUrl = img.attr("src"); img.removeAttr("src"); img.attr("src", imgUrl); 在第二个代码段中。
@user1093774：请注意，第一个代码段包含src='javascript: void 0'，而第二个代码段包含img.removeAttr("src") 而不是img.attr("src", "")。
谢谢，我试试看。如果这有助于我解决它，我会回复你:)

【解决方案2】：

另一种解决方案是将src 属性设置为有效的、最小的、Base64 编码的图像，如http://jsfiddle.net/leonardobraga/1gefL8L5/

这将避免触发无休止的错误处理，并且不会对代码大小产生太大影响。

【讨论】：