Question

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($file!="." && $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.

Answer 1

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