在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-loop不在endles循環中運行。每個應該下載的圖像只運行一次。所以這不是問題。

該頁面上實際可以看到該行爲：http://www.energy-frames.dk/Konfigurator。按F12並檢查網絡選項卡。對主頁上的圖像進行更改，以便開始下載新圖像。 Bredde（英文寬度），見下文：

當這個變化被做成新的圖像下載無限循環（它幾乎每次都發生在IE中）。看下面你可以改變什麼

我真的花了很多時間在這個調試，我不明白爲什麼它在IE中這樣的行爲，但不是在所有其他瀏覽器。

因此，有沒有人有任何想法，爲什麼會發生這種情況？或者有什麼我可以嘗試的建議？ 編輯：

@gxoptg 我試過你的建議。使用 「的javascript：無效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瀏覽器 - 仍然能正常鉻。

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文件。）

Answer 2

另一種解決方案是將src屬性設置爲有效的，最小，Base64編碼圖像，如在http://jsfiddle.net/leonardobraga/1gefL8L5/

這將避免觸發無盡的錯誤處理，並且不會影響代碼大小。