javascript - Image loading failing in IE9+10 -

ok site heavily graphic based had come way user not watch each image load in 1 one. developed following code sort of preloader until images on page ready. know shouldn't delay seeing page content images, images content on page chose lesser evil of faux-preloading.

the code works : finds images in ul page, holds them in var (images) , fades in parent li once image in scope has loaded. has check when image being pulled cache. creates nice 1 one fade in of empty li's styled empty boxes until images loaded , rest functionality of page triggered.

now problem : ie9 , ie10 halfway through process , randomly stops page never finishes "loading" , site nonfunctioning. i've tried few things im not sure problem is. html , js below.

the images html (only show 2 of 80 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 revealed on mouse over, jpg solid state.

var images = $('.spreads').find('img'); var loadedlen; var lilen; var x = 0, = 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 images loaded             //if animate toc in             loadedlen = $('.spreads li.loaded').length;             lilen = $('.spreads li').length;             if (loadedlen === lilen) {                 showpages();                 console.log('@showpages call checkpagestate');             } else if (loadedlen === 10) {                 //fix li height issue                 var imgheight = $(images[4]).height() + 2;             };         };     });      function showpages() {         var ph = $(document).height();           //then call function loop         //and fade in each image until reaches last 1         pagetime = settimeout(function () {             cleartimeout(pagetime);             fadeineachpage();         }, 100);          function fadeineachpage() {             if (i < images.length) {                 cleartimeout(pagetime);                 //start 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 called program                  //will pass else if (i === images.length) few times                 //thus causing text pulse in correctly                 if( x === 0 )                 {                     //adds listener mouse on effect                     addgiflistener();                      $('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);                      var intime = settimeout(function () {                         cleartimeout(intime);                         $('#overview header h1.title').html('thank purchasing 6 memos ebook. select chapter 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 help!

the solution $(this).prop('compelete'); suggested musa.

using $(this).prop('complete') or $('img').prop('complete') catch image files on page when js deployed; whereas load() checks if has loaded since js deployed.

this trying $(this).complete(); - seems associated ajax , not passing conditional causing rest of images loaded , displayed while leaving ones loaded before js in dark - speak.