Endless looping quando il valore src viene modificato in Internet Explorer

Question

Ho un problema con alcuni javascript in Internet Explorer.

Funziona bene con altri browser.

Ho il seguente metodo, che modifica la proprietà src di un'immagine e in questo caso dovrebbe iniziare un download dell'immagine. Vedi sotto:

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); 
    } 
} 

Il problema è che quando si cambia questa proprietà Internet Explorer avvia un ciclo infinito di download delle immagini. Si noti che ho inserito un console.log nel ciclo for. Posso confermare che questo ciclo non viene eseguito in un loop di endles. Viene eseguito una sola volta per ogni immagine che deve essere scaricata. Quindi non è questo il problema.

Il comportamento può effettivamente essere visualizzato in questa pagina: http://www.energy-frames.dk/Konfigurator. Premi F12 e controlla la scheda di rete. Apporta una modifica all'immagine sulla home page in modo da avviare un download di nuove immagini, ad es. Bredde (Larghezza in inglese), vedi sotto:

Quando questo cambiamento viene effettuato, le nuove immagini vengono scaricate in un ciclo infinito (succede quasi sempre in IE). Vedi sotto di ciò che potresti cambiare

Ho davvero dedicato molto tempo al debugging in questo e non vedo perché si comporta in questo modo in IE ma non in tutti gli altri browser.

Così qualcuno ha idea del perché questo accada? O hai qualche suggerimento su cosa potrei provare? MODIFICA:

@gxoptg Ho provato quello che mi hai suggerito. con "javascript: void 0" come questo:

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

e questo:

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

mi dà questo errore:

D'altra parte, se io rimuovere completamente la riga img.attr ("src", ""); nel metodo imgLoadError, poi vedo che le immagini non vengono scaricate in un ciclo infinito. D'altra parte non vengono visualizzati. Quindi sto usando la javascript: void 0 sbagliato?

Quando faccio la seguente:

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

Poi l'non c'è ciclo infinito, ma l'immagine appare solito in IE - funziona ancora bene in cromo.

Answer 1

Ecco il motivo:

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); 
} 

Nota la linea var newimg = $(...). In Internet Explorer, l'impostazione di un attributo vuoto src su un'immagine attiva l'evento error. A causa dell'errore, viene chiamata la funzione imgLoadError.Ecco come si presenta:

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);  
    } 
} 

In questa funzione, si esegue img.attr("src", ""), che imposta l'attributo vuoto src, attiva l'evento error, e chiama di nuovo la funzione imgLoadError. Ciò causa il ciclo infinito.

Per evitare l'errore (e quindi il ciclo infinito), impostare la sorgente dell'immagine su "javascript:void 0" anziché su "" in entrambi i codici. Questa fonte è valida e dovrebbe funzionare correttamente.

(Secondo le osservazioni, tutto il codice si trova a /Assets/Scripts/directives/image.rotation.directive.js file.)

Answer 2

Una soluzione alternativa è quella di impostare l'attributo src ad un minimo un'immagine valida,, Base64 codificato, come in http://jsfiddle.net/leonardobraga/1gefL8L5/

Questo eviterebbe di innescare l'infinita gestione degli errori e non influisce così tanto sulla dimensione del codice.