Intermittent jQuery Errors

I'm having some odd and intermittent errors, which I assume are related to my jQuery. I made a simple content preloader that renders all the images for an application and then displays the content once it is completed. Below is the script:

<?php

$i=0;

$handle=opendir('images');

while(false!==($file=readdir($handle)))
{
  if($fi开发者_如何学JAVAle!="." && $file!=".." && $file!=basename(__FILE__))
  { ?>
    <img class="image_preload hidden" src="<?php echo $app_info['image_url'].$file; ?>"></img> <?php 

    $i++;
  }
} ?>

<script>
  max_loaded=<?php echo $i; ?>;
  $('.image_preload').bind({'load':function(){preloadCounter();},'error':function(){preloadCounter();}});
</script>


  function preloadCounter()
  {
    total_loaded++;

    $('#loading_percentage').text(Math.floor((total_loaded/max_loaded)*100));
    $('#loading_bar').css('width',Math.floor((total_loaded/max_loaded)*100)+'%');

    if(total_loaded==max_loaded && max_loaded>0)
    {
      $('#load_display').hide();
      $('#app_display').show();

      setCanvasSize();
      runOnStart();
    }
  }

The PHP code runs first, of course. The script searches through the images directory and renders all the images and hides them. $i is incremented when an image put into the page.

When this is done, it is supposed to set off the event listener (tied for both 'load' and 'error') at the bottom of the page. It first sets the max_loaded var to the amount of images put into the page and then the listener should trigger.

The jQuery then modifies a loading bar according to how far along a JS var is incremented. When it the page is done loading or is through with errors, it should display my application's content.

This works on occasion, with most errors coming from IE. I have had reports from several users that it fails across all latest browsers. Strangely enough, it works fine for others in the latest browsers.

Is there something I'm missing here? I do get the error on occasion in IE, but there are never any errors displayed in Dev Mode. I'm at a loss.

The problem is that it will load some content, but not all. The loading bar ends up stalling at any percentage. Sometimes it'll go through, sometimes it won't.

From the jQuery load event documentation (emphasis mine):

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn't work consistently nor reliably cross-browser
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
• It doesn't correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser's cache

Why not let the browser itself report page load status? They've been doing this reliably for two decades now.

Issue was with browser caching. Using a jQuery plugin called ImageMonitor fixed the problem.