Image load timeout in Internet Explorer

Question

I have a page for an internal app that displays document images streamed from a document storage system using a web service. The problem I am having is that when a user does their search they may get hundreds of hits, which I have to display on one large page so they can print them all. This works fine in Firefox, but in IE it stops loading the images after a while so I get a hundred or so displayed and the rest just have the broken image symbol. Is there a setting somewhere that I can change this timeout?

Answer 1

If the issue is indeed a timeout, you might be able to work around it by using a "lazy load" script and adding new images to the document only after existing images have loaded.

There are a lot of ways to do this, but here's a simple example I threw together and tested. Instead of this:

<img src="image001.jpg" />
<img src="image002.jpg" />
<img src="image003.jpg" />
<img src="image004.jpg" />
<!-- Etc etc etc -->

You could do this:

<div id="imgsGoHere">
</div>

<script type="text/javascript">
    function crossBrowserEventAttach(objectRef, eventName, functionRef)
    {
        try {
            objectRef.addEventListener(eventName, functionRef, false);
        }
        catch(err) {
            try {
                objectRef.attachEvent("on" + eventName, functionRef);
            }
            catch(err2) {
                // event attachment failed
            }
        }
    }


    function addImageToPage()
    {
        var newImageElement = document.createElement("img");
        newImageElement.src = imageArray[nextImageNumber];

        var targetElement = document.getElementById("imgsGoHere");
        targetElement.appendChild(newImageElement);

        nextImageNumber++;

        if (nextImageNumber < imageArray.length) {
            crossBrowserEventAttach(newImageElement, "load", addImageToPage);
            crossBrowserEventAttach(newImageElement, "error", addImageToPage);
        }
    }

    var nextImageNumber = 0;

    var imageArray = new Array();
    imageArray[imageArray.length] = "image001.jpg";
    imageArray[imageArray.length] = "image002.jpg";
    imageArray[imageArray.length] = "image003.jpg";
    // .
    // .
    // .
    // Snip hundreds of rows
    // .
    // .
    // .
    imageArray[imageArray.length] = "image999.jpg";

    addImageToPage();
</script>

Each image is added to the page only after the previous image loads (or fails to load). If your browser is timing out, I think that will fix it.

Of course, the problem might actually not be a timeout, but rather that you're running out of memory/system resources and IE is giving up. Or there might be an IE DOM limitation like Sra said.

Answer 2

No final solution, but some hints... I think the ie Dom hangs up. I,ve seen this in other cases. I needed simply to show the images and used a js which loads the image the time they came into focus, but that want work if you directly hit print I think. Can you use the new css ability to store imagedata directly instead of links. That should solve your problem. I am not quite sure but I think it is supported since ie 7

Answer 3

My guess is that you have to work around the IE setting, the easiest way to do it is simply not showing images that are not loaded or replacing them with a default image:

your html:

<img src="http://domain.com/image.jpg" />

your js:

$('img').load(function(){

    // ... loaded  

}).error(function(){

    // ... not loaded, replace
    $(this).attr('src','/whatever/default.jpg');

    // ... not loaded, hide
    $(this).hide();

});

Answer 4

That is a problem with microsoft. Unfortunately, this is a setting that would have to be changed on every single computer, as there is no remote way to alter it. To change it on your computer, try opening regedit and adding the RecieveTimeout DWORD with a Value of (#of minutes)*6000. Hope this helps-CodeKid1001

Edit: Sorry about that, I forgot to put in the file path: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\InternetSettings