javascript - 在 Internet Explorer 中更改 src 值时无限循环

Question

我在 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 循环不会在无限循环中运行。它只为每个应该下载的图像运行一次。所以这不是问题。

该行为实际上可以在此页面上看到: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 中仍然可以正常工作。

Answer 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" 而不是 ""。此来源有效，应该可以正常工作。

(根据评论，所有代码位于/Assets/Scripts/directives/image.rotation.directive.js文件中。)