Endless looping when src value is changed in Internet Explorer

Question

I have a problem with some javascript in Internet Explorer.

It works fine in other browsers.

I have the following method, that changes the src property of an images and when this happens a download of that image should start. See below:

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

The problem is that in when changing this property Internet Explorer starts an endless loop of downloading images. Notice that i have put a console.log in the for-loop. I can confirm that this for-loop does not run in an endles loop. It is only run once for each image that should be downloaded. So that is not the problem.

The behaviour can actually be seen on this page: http://www.energy-frames.dk/Konfigurator. Hit F12 and check in the network tab. Make a change to image on the homepage so a download of new images is started, e.g. Bredde(Width in english), see below:

When this change is made new images are downloaded in an endless loop(it happens almost every time in IE). See below of what you could change

I have really spent a lot of time debugging in this and i cant see why it behaves like this in IE but not in all other browsers.

So does anyone have any idea why this happens? Or have some suggestions on what i could try? EDIT:

@gxoptg I have tried what you suggested. using "javascript:void 0" like this:

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

and this:

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

gives me this error:

On the other hand, if i completely remove the line img.attr("src", ""); in the imgLoadError method, then i see that images are not downloaded in an endless loop. On the other hand they are not displayed. So am i using the javascript:void 0 wrong?

When i do the following:

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

Then the there is not endless loop but the image wont appear in IE - still works fine in chrome.

Answer 1

Here’s the reason:

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

Note the var newimg = $(...) line. In Internet Explorer, setting an empty src attribute on an image triggers the error event. Due to the error, the imgLoadError function is called. It looks like this:

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 this function, you run img.attr("src", ""), which sets the empty src attribute, triggers the error event, and calls imgLoadError function again. This causes the endless loop.

To prevent the error (and therefore the endless loop), set image source to "javascript:void 0" instead of "" in both code pieces. This source is valid and should work properly.

(According to comments, all the code is located in /Assets/Scripts/directives/image.rotation.directive.js file.)