Simple image load detection with .load()

Simple image load detection with .load()

I have a fading photo slideshow which I would like to initialize after the first image is loaded. I was working on the following to detect if the image is cached or not and act accordingly.

  1. $(document).ready(function () {   
        if($('.slideshow li img')[0].complete == 'true') {
            
          // first slideshow image is cached, start the show
          $('.slideshow').cycle({ fx: 'fade', speed: 1500, timeout: 5000});
        } else {
            
          // first slideshow image is loading, bind a load handler to init the show
          $('.slideshow li img')[0].load(function () {
              $('.slideshow').cycle({fx: 'fade', speed: 1500, timeout: 5000});
          });
        }
    });











In the second portion of the conditional, I get "$(".slideshow li img")[0].load is not a function". If I remove "[0]" it works, but I'm no longer singling out the first image of the slideshow.

In reality, this script should be improved to detect if the first TWO images in the show are loaded, but I'm just wondering why I can't use $(".slideshow li img")[0].load in the first place.