jQuery/JavaScript: Trigger when preloaded

Question

Hello there,

jQuery has the .ready() function, but I am unsure whether this is what I need:

I set a default background image in CSS (imange 1 out of 4), once document is loaded (images and all, not only DOM); I want to start preloading background image 2 out of 4. Once that is loaded, I want to fade image 1 into image 2. Then I want to preload the next image (3 out of 4), once that is loaded, I want to fade from background image 2 into image 3, and finally preload image 4. Once image 4 is loaded, i would like to fade image 3 into image 4. After that, I want to cycle between the images with a set time interval.

What strategy would I use to solve this? .load() function?

Thank you for your time.

Kind regards,
Marius

Answer 1

Jquery.ready() or better yet $() will trigger once the last page element is successfully loaded. From there you can proceed to run a chain of methods, each method triggering the next in a callback passed to it.