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ループで実行されないことを確認できます。ダウンロードする必要がある画像ごとに1回だけ実行されます。だからそれは問題ではありません。

この動作は実際にはこのページに表示されます：http://www.energy-frames.dk/Konfigurator。 F12を押して、[ネットワーク]タブをチェックインします。ホームページの画像を変更して、新しい画像のダウンロードが開始されるようにします。この変更が行われると、新しい画像が無限ループでダウンロードされます（これはIEでほぼ毎回発生します）。あなたは、私は本当にこの時間のデバッグの多くを費やしていると、それはIEでなく、他のすべてのブラウザでこのように振る舞うなぜ私が見るカント

を変更することができるものの下に参照してください。

これはどうして起こりますか？または、私が試してみたいことについていくつか提案していますか？ 編集：

@gxoptg 私はあなたの提案を試しました。このように： "無効0のjavascriptを"：使用して

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に表示され文句を言わない - まだクロームで正常に動作します。

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 = $(...)ライン：

Answer 1

はここに理由です。 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);  
    } 
} 

、あなたは、空のsrc属性を設定しますerrorイベントをトリガし、再度imgLoadError関数を呼び出すimg.attr("src", "")を実行します。これにより、無限ループが発生します。

エラー（およびエンドレスループ）を回避するには、両方のコードピースで""の代わりに"javascript:void 0"にイメージソースを設定します。このソースは有効であり、正しく動作するはずです。

（コメントによると、全てのコードが/Assets/Scripts/directives/image.rotation.directive.jsファイル内に配置されている。）

Answer 2

代替ソリューションはhttp://jsfiddle.net/leonardobraga/1gefL8L5/

これと同様に、有効な、最小、Base64でエンコードされた画像にsrc属性を設定することです無限のエラー処理を引き起こすのを避け、コードサイズにそれほど大きな影響を与えません。