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.

Can you also share the code where images variable is cast, used etc please so that I can have a better idea, if not share the name of the file as you have quite a lot in your scripts folder. thanks. — sed, Nov 18 '15 at 16:31
have you tried this http://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src ? — , Nov 20 '15 at 16:04
did you try `img.setAttribute("...", "...")` or `img.src = "..."` — CoderPi, Nov 24 '15 at 11:13

Ivan Akulov · Accepted Answer · 2015-11-18T17:09:10.597

7

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.)

edited Nov 18 '15 at 17:09

answered Nov 18 '15 at 16:54

Ivan Akulov

4,323
5
37
64

@user1093774: Quick thought: try replacing `img.attr("src", "javascript:void 0");` with `img.removeAttr("src")`. Does this help? – Ivan Akulov Nov 19 '15 at 08:52
the combination of this img.removeAttr("src"); and this var newimg = $(""); gives me an endless loop. – Diemauerdk Nov 19 '15 at 13:58
@user1093774: I mean, write the following: `var newimg = $("");` in the first code piece, and `var imgUrl = img.attr("src"); img.removeAttr("src"); img.attr("src", imgUrl);` in the second one. – Ivan Akulov Nov 20 '15 at 07:28
@user1093774: Note that the first code piece contains `src='javascript: void 0'`, whereas the second one has `img.removeAttr("src")` instead of `img.attr("src", "")`. – Ivan Akulov Nov 20 '15 at 07:29
Thanks, i'll try something out. I'll get back to you if this helps me solve it :) – Diemauerdk Nov 23 '15 at 07:18
When i set the image source to something that is not empty like img.attr("src", "JustSomething"); and src='JustSomething' then i actually see that the download loop stops(in the Network tab). However the image is not rendered properly and freezes. At the same time the function imgLoadError is still called in an endless loop (Seen from the Console tab). I will grand you the bounty :). But do you have any idea why the imgLoadError function is still running in an endless loop while the download in the network tab is not in an endless loop? Thx for the help! – Diemauerdk Nov 25 '15 at 11:28
@user1093774: It seems that [IE caches all image requests](http://stackoverflow.com/questions/4604332/does-ie-cache-that-an-image-was-not-found), even when they return `404`s. So, when you set the image `src` attribute to `"JustSomething"` and IE tries to connect to that URL, it receives 404 and caches the response. Due to this, when you set `src` to `"JustSomething"` again later, IE does trigger the `error` event, but doesn’t perform any new network requests. – Ivan Akulov Nov 25 '15 at 12:34
@user1093774: Just for reference, here’s [the CodePen](http://codepen.io/gxoptg/pen/ojVwpL) with the similar code. In Chrome and Firefox, the Network panel shows the endless loop, whereas in IE the image request is cached, and no new network requests are made. – Ivan Akulov Nov 25 '15 at 12:38

Leonardo Braga · Answer 2 · 2015-11-25T14:05:19.240

0

An alternative solution is to set the src attribute to a valid, minimal, Base64 encoded image, as in http://jsfiddle.net/leonardobraga/1gefL8L5/

This would avoid triggering the endless error handling and it doesn't impact the code size that much.

edited Nov 25 '15 at 14:05

answered Nov 25 '15 at 00:50

Leonardo Braga

477
4
9

Endless looping when src value is changed in Internet Explorer

2 Answers2