Vòng lặp vô tận khi giá trị src bị thay đổi trong Internet Explorer

Question

Tôi gặp sự cố với một số javascript trong Internet Explorer.

Nó hoạt động tốt trong các trình duyệt khác.

Tôi có phương pháp sau, thay đổi thuộc tính src của hình ảnh và khi điều này xảy ra, việc tải xuống hình ảnh đó sẽ bắt đầu. Xem bên dưới:

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

Vấn đề ở chỗ khi thay đổi thuộc tính này Internet Explorer bắt đầu vòng lặp tải xuống vô tận. Lưu ý rằng tôi đã đặt một console.log trong vòng lặp for. Tôi có thể xác nhận rằng điều này cho vòng lặp không chạy trong một vòng lặp endles. Nó chỉ chạy một lần cho mỗi hình ảnh cần tải xuống. Vì vậy, đó không phải là vấn đề.

Hành vi có thể thực sự được thấy trên trang này: http://www.energy-frames.dk/Konfigurator. Nhấn F12 và kiểm tra trong tab mạng. Thực hiện thay đổi đối với hình ảnh trên trang chủ để bắt đầu tải xuống hình ảnh mới, ví dụ: Bredde (Chiều rộng bằng tiếng Anh), xem bên dưới:

Khi thay đổi này được thực hiện hình ảnh mới được tải xuống trong vòng lặp vô tận (nó xảy ra hầu như mọi lúc trong IE). Xem bên dưới những gì bạn có thể thay đổi

Tôi thực sự đã mất rất nhiều thời gian để gỡ lỗi và tôi không thể thấy tại sao nó hoạt động như thế này trong IE nhưng không có trong tất cả các trình duyệt khác.

Vì vậy, có ai có bất kỳ ý tưởng nào tại sao điều này xảy ra không? Hoặc có một số gợi ý về những gì tôi có thể thử? EDIT:

@gxoptg Tôi đã thử những gì bạn đề xuất. sử dụng "javascript: void 0" như thế này:

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

và điều này:

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

mang lại cho tôi lỗi này:

Mặt khác, nếu tôi hoàn toàn loại bỏ dòng img.attr ("src", ""); trong phương thức imgLoadError, sau đó tôi thấy rằng hình ảnh không được tải xuống trong vòng lặp vô tận. Mặt khác, chúng không được hiển thị. Vì vậy, tôi đang sử dụng javascript: void 0 sai?

Khi tôi làm như sau:

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

Sau đó, không có vòng lặp vô tận nhưng hình ảnh sẽ không xuất hiện trong trình duyệt IE - vẫn hoạt động tốt trong chrome.

Answer 1

Dưới đây là lý do:

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

Lưu ý dòng var newimg = $(...). Trong Internet Explorer, đặt thuộc tính trống src trên hình ảnh sẽ kích hoạt sự kiện error. Do lỗi, hàm imgLoadError được gọi.Nó trông giống như thế này:

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

Trong chức năng này, bạn chạy img.attr("src", ""), thiết lập thuộc tính src trống, gây nên sự kiện error, và kêu gọi imgLoadError chức năng một lần nữa. Điều này gây ra vòng lặp vô tận.

Để ngăn chặn lỗi (và do đó vòng lặp vô tận), hãy đặt nguồn hình ảnh thành "javascript:void 0" thay vì "" trong cả hai đoạn mã. Nguồn này hợp lệ và hoạt động bình thường.

(Theo ý kiến, tất cả các mã nằm trong /Assets/Scripts/directives/image.rotation.directive.js tập tin.)

Answer 2

Một giải pháp thay thế là để thiết lập các thuộc tính src đến một, tối thiểu, hình ảnh Base64 mã hóa có giá trị, như trong http://jsfiddle.net/leonardobraga/1gefL8L5/

này sẽ tránh kích hoạt xử lý lỗi vô tận và nó không ảnh hưởng đến kích thước mã nhiều.