4

I have an .NET application which loads images dynamically. I have a loading gif shown until the image loads. Then the image is shown.

The loading gif image size is 16x11. The images that are loaded are all resized to 80px width.

This code works in IE8-10 (But not in IE11):

$(imagesToLoadList).each(function () {

    var image = $(this);
    var realSrc = image.attr('real-src');

    var demandedImageIndex = parseInt(categoryId) + (scrollCount * 10) + index;

    image.unbind();
    image.bind('load', { ImageIndex: demandedImageIndex }, ImageLoaded);
    image.attr('src', realSrc);

    index++;
});

function ImageLoaded(event) {

    //after image loaded 
}

In IE 11, the image loads but it does not resize to 80px and stays16x11. It will resize correctly when the event is fired again. (App has a slider, so load event is called every time slide is changed).

Any ideas on how to fix this?

FYI, doesn't matter if the image is cached or not. Thinking along the lines of the IE8 bug

sergdenisov
  • 8,327
  • 9
  • 48
  • 63
stackErr
  • 4,130
  • 3
  • 24
  • 48

1 Answers1

1

Seems like it works well in IE 11 even with jQuery 1.8.0/1.8.3 (now the latest stable versions are 1.11.3/2.1.4. Click to preview to load full-size image — JSFiddle:

var $img = $('img');

$img.one('click', function() {
    $img.one('load', function() {
        this.width = 320;
        this.height = 240;
        console.log('Image loaded');
    });

    this.src = $(this).data('large-src');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<img src="http://oi59.tinypic.com/nxtdsp.jpg"
     data-large-src="http://oi57.tinypic.com/fegkeb.jpg"/>

If you'll provide the working code snippet with the bug, maybe I could help you.

sergdenisov
  • 8,327
  • 9
  • 48
  • 63