Бесконечный цикл, когда значение 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
.)
Ответ 2
Альтернативным решением является установка атрибута src
на допустимое минимальное кодированное изображение Base64, как в http://jsfiddle.net/leonardobraga/1gefL8L5/
Это позволит избежать запуска бесконечной обработки ошибок, и это не сильно повлияет на размер кода.