Бесконечный цикл, когда значение src изменяется в Internet Explorer

У меня проблема с некоторым javascript в Internet Explorer.

Он отлично работает в других браузерах.

У меня есть следующий метод, который изменяет свойство 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 запускает бесконечный цикл загрузки изображений. Обратите внимание, что я поставил console.log в for-loop. Я могу подтвердить, что этот цикл for не работает в цикле контуров. Он запускается только один раз для каждого изображения, которое должно быть загружено. Так что это не проблема.

На самом деле поведение можно увидеть на этой странице: http://www.energy-frames.dk/Konfigurator. Нажмите F12 и проверьте вкладку сети. Внесите изменения в изображение на главной странице, чтобы начать загрузку новых изображений, например. Bredde (ширина по-английски), см. Ниже:

Когда это изменение сделано, новые изображения загружаются в бесконечный цикл (это происходит почти каждый раз в IE). Ниже вы можете изменить

Я действительно потратил много времени на отладку в этом, и я не могу понять, почему он ведет себя как в IE, но не во всех других браузерах.

У кого-нибудь есть идея, почему это происходит? Или есть некоторые предложения о том, что я могу попробовать? EDIT:

@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 wrong?

Когда я сделаю следующее:

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

Тогда нет бесконечного цикла, но изображение не будет отображаться в IE - все еще отлично работает в chrome.

Ответ 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.)

Ответ 1

Ответ 2