Image loading failing in IE9+10

Question

Ok so for a site that is heavily graphic based I had to come up with a way for the user not to watch each image load in one by one. So I developed the following code as a sort of preloader until all the images on the page are ready. I know usually we shouldn't delay seeing page content for images, but the images are the only content on the page so I chose the lesser evil of faux-preloading.

The code works like this : it finds all the images in the ul page, holds them in a var (images) and fades in its parent li once the image in scope has loaded. It also has a check for when the image is being pulled from the cache. This creates a nice one by one fade in of the empty li's which are styled as empty boxes until the images themselves are loaded and the rest functionality of the page is triggered.

Now the problem : ie9 and ie10 only get halfway through the process and then randomly stops thus the page never finishes "loading" and the site is nonfunctioning. I've tried a few things but Im not sure what the problem is. The html and js are below.

The images html (only show two of 80 something li's :

<ul>
   <li class="ch-one link">
        <img class="gif" src="_images/_gifs/_inthemess/inthemess_1.gif" />
    <img src="_images/_spreads/_thumbs/spread-04.jpg" />
   </li>
   <li class="ch-one link">
        <img class="gif" src="_images/_gifs/_inthemess/inthemess_2.gif" />
    <img src="_images/_spreads/_thumbs/spread-05.jpg" />
   </li>
</ul>

The gif is revealed on mouse over, the jpg is the solid state.

var images = $('.spreads').find('img');
var loadedLen;
var liLen;
var x = 0, i = 0;

images.each(function () {
        if ($(this).complete) {
            $(this).parent().animate({
                'opacity': '1'
            }, 1000);

            $(this).parent().addClass('loaded');
            checkPageState();
        } else {
            $(this).load(function () {
                $(this).parent().animate({
                    'opacity': '1'
                }, 1000);

                $(this).parent().addClass('loaded');
                checkPageState();
            });
        };

        function checkPageState() {
            //check if all images are loaded
            //if they are animate TOC in
            loadedLen = $('.spreads li.loaded').length;
            liLen = $('.spreads li').length;
            if (loadedLen === liLen) {
                showPages();
                console.log('@showPages call from checkPageState');
            } else if (loadedLen === 10) {
                //fix li height issue
                var imgHeight = $(images[4]).height() + 2;
            };
        };
    });

    function showPages() {
        var ph = $(document).height();  
        //then we call the function that will loop
        //and fade in each image until it reaches the last one
        pageTime = setTimeout(function () {
            clearTimeout(pageTime);
            fadeInEachPage();
        }, 100);

        function fadeInEachPage() {
            if (i < images.length) {
                clearTimeout(pageTime);
                //start the countdown first
                pageTime = setTimeout(function () {
                    i++;
                    fadeInEachPage();
                }, 1);

                theImage = images[i];
                $(theImage).not('.gif').animate({ 'opacity': '1' }, 800);

            } else if (i === images.length) {
                //trash collection
                //fadeInEachPage is called so frequently the program 
                //will pass else if (i === images.length) a few times
                //thus causing the text to pulse in correctly
                if( x === 0 )
                {
                    //adds listener for mouse over effect
                    addGifListener();

                    $('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);

                    var inTime = setTimeout(function () {
                        clearTimeout(inTime);
                        $('#overview header h1.title').html('Thank you for purchasing the 6 Memos eBook. Simply select a chapter to enjoy full size.');
                        $('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
                    }, 2000);

                    var finalTitleTime = setTimeout(function() {
                        clearTimeout(finalTitleTime);
                        $('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);
                    }, 8000);

                    var finalFadeIn = setTimeout( function() {
                        $('#overview header h1.title').html('6 Memos');
                        $('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
                        clearTimeout(finalFadeIn);
                    }, 9000);

                    //trash collection
                    x++;    
                } else {
                    return;
                };

            };
        };
    };

Thanks for the help!

Answer 1

The solution for this was $(this).prop('compelete'); as suggested by Musa.

Using $(this).prop('complete') or $('img').prop('complete') will catch any image files already on the page when the js is deployed; whereas load() only checks if it has loaded since the js was deployed.

This was what I was trying for with $(this).complete(); - which seems to be associated with AJAX and thus was not passing the conditional causing the rest of the images to be loaded and displayed while leaving the ones which loaded before the js in the dark - so to speak.