Jquery: How can I place triggers on images already cached?

Question

Please see: http://flx.me/h/0504/

Source: http://pastebin.com/bDh5k3Qd

jquery.preload-min.js: http://jquery.com/plugins/project/Preload

jquery.jplayer.min.js: http://www.happyworm.com/jquery/jplayer/0.2.4/developer-guide.htm

I'm using jquery.preload-min.js to preload images and to send a play trigger to jquery.jplayer.min.js to start playing a mp3 file.

This works great when viewing the page for the first time (or force reloading all content). However, when the image has already been cached, it doesn't use the preloading script and thus does not send the play trigger to jplayer.

How can I make it send a play trigger even when the image is cached?

Thank you in advance,

Dennis

Answer 1

1 Problem is - if image is cached, then onComplete not work, because requests to server are not sent.

2 As I understand from your code, you not need an onComplete callback for every image.. May be you can try onFinish event?

_{3 Best way to do this task is to write your own preloader :)}

Answer 2

You can do something like this:

$("image_selector_here").each(function() {
  if(this.complete) $(this).load();
});

This triggers the load event for cached images (this.complete == true) where the browser isn't firing the .load() event itself.