JQuery 1.8 in IE 11 does not fire image load event on page load

Question

I have a .NET application that dynamically loads images. I upload the gif until the image loads. Then the image will be shown.

The size of the bootable gif image is 16x11. Uploaded images are resized to width 80px.

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 is loaded, but it does not change until 80pxand remains 16x11. It will resize correctly when the event is fired again. (The application has a slider, so the download event is fired every time the slide changes).

Any ideas on how to fix this?

FYI, , . IE8

Answer 1

, IE 11 jQuery 1.8.0/1.8.3 ( 1.11.3/2.1.4. , , - 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"/>

Hide result

, , .