Preload images jQuery cycle

Hi all

I have a simple jquery cycle slideshow here:

http://www.ttmt.org.uk/gallerytest/nothumbs.html

This demo has alot of image 30+ to illustrate my problem.

When the page first loads there is a bit of a delay before the slideshow start

I think this is because the page is waiting for all the images to load.

I’m hiding the images and just showing the first img while the page loads to stop all the
images from flashing up when the page loads.


#slideshow img{
     display:none;
   }
   #slideshow .first{
     display:block;
   }

Is it possible to load the first few images while the rest of the images are loading.
so i could at least show 2 or 3 images.


<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

  <style type="text/css">


    #slideshow img{
      display:none;
    }
    #slideshow .first{
      display:block;
    }

  </style>

  </head>

<body>

  <div id="slideshow">
    <img src="images/car/car01.jpg" class="first" alt="" />
    <img src="images/car/car02.jpg" alt="" />
    <img src="images/car/car03.jpg" alt="" />
    <img src="images/car/car04.jpg" alt="" />
    <img src="images/car/car05.jpg" alt="" />
    <img src="images/car/car06.jpg" alt="" />
    <img src="images/car/car07.jpg" alt="" />
    <img src="images/car/car08.jpg" alt="" />
    <img src="images/car/car09.jpg" alt="" />
    <img src="images/car/car10.jpg" alt="" />
    <img src="images/plane/plane01.jpg" alt="" />
    <img src="images/plane/plane02.jpg" alt="" />
    <img src="images/plane/plane03.jpg" alt="" />
    <img src="images/plane/plane04.jpg" alt="" />
    <img src="images/plane/plane05.jpg" alt="" />
    <img src="images/plane/plane06.jpg" alt="" />
    <img src="images/plane/plane07.jpg" alt="" />
    <img src="images/plane/plane08.jpg" alt="" />
    <img src="images/plane/plane09.jpg" alt="" />
    <img src="images/plane/plane10.jpg" alt="" />
    <img src="images/boat/boat01.jpg" alt="" />
    <img src="images/boat/boat02.jpg" alt="" />
    <img src="images/boat/boat03.jpg" alt="" />
    <img src="images/boat/boat04.jpg" alt="" />
    <img src="images/boat/boat05.jpg" alt="" />
    <img src="images/boat/boat06.jpg" alt="" />
    <img src="images/boat/boat07.jpg" alt="" />
    <img src="images/boat/boat08.jpg" alt="" />
    <img src="images/boat/boat09.jpg" alt="" />
    <img src="images/boat/boat10.jpg" alt="" />
    <img src="images/plane/plane01.jpg" alt="" />
    <img src="images/plane/plane02.jpg" alt="" />
    <img src="images/plane/plane03.jpg" alt="" />
    <img src="images/plane/plane04.jpg" alt="" />
    <img src="images/plane/plane05.jpg" alt="" />
    <img src="images/plane/plane06.jpg" alt="" />
    <img src="images/plane/plane07.jpg" alt="" />
    <img src="images/plane/plane08.jpg" alt="" />
    <img src="images/plane/plane09.jpg" alt="" />
    <img src="images/plane/plane10.jpg" alt="" />
    <img src="images/boat/boat01.jpg" alt="" />
    <img src="images/boat/boat02.jpg" alt="" />
    <img src="images/boat/boat03.jpg" alt="" />
    <img src="images/boat/boat04.jpg" alt="" />
    <img src="images/boat/boat05.jpg" alt="" />
    <img src="images/boat/boat06.jpg" alt="" />
    <img src="images/boat/boat07.jpg" alt="" />
    <img src="images/boat/boat08.jpg" alt="" />
    <img src="images/boat/boat09.jpg" alt="" />
    <img src="images/boat/boat10.jpg" alt="" />
  </div><!-- #slideshow -->

  <div id="thumbWrap">
    <ul id="thumbs">

    </ul>
  </div>

  <script type="text/javascript">

    $(window).load(function() {
      //
      //cycle
      //
      $('#slideshow').cycle({
          fx:     'fade',
          speed:  'fast',
          timeout: 3000,
      });

    });

  </script>

</body>

</html>


Have you tried using the jQuery callback:


$(function () {

instead of:

$(window).load(function() {

I can’t remember what it was but


$(function () {

was causing a problem.I will try it again

You could use flush() function to output the images you want to show up first while let the rest of images to load. Unfortunately the browser is making this not possible as it will buffer the output even with flush() is called.

For example, this script outputs the all at once instead of one line at a time.

<HTML>
<BODY>
This page is loading.<br />
<?php flush(); sleep(2); ?>
Almost there...<br />
<?php flush(); sleep(2); ?>
Done.<br />
</BODY>
</HTML>

Interest to know anyone can come up with a solution.

I don’t think you would want to do that, as that slows down your script, thus slowing down your page load.

@ttmt,
Can you just output 3 images, and then load the remainder 27 with ajax or through JavaScript? Do you need all 30 on the page immediately?

cpradio - Thats exactly what i wanted to do.

Have 3 or 4 images that fade into each and when that’s finished hopefully the images have loaded and the slideshow will start.

Okay, I think this is what you want: http://jsfiddle.net/cpradio/ynVH6/

I added “before: onBefore” to your slideshow definition from this example
I put all but the first 3 of your images into an array, and then cycle through them creating them in the dom, but not physically anywhere on the page.
Once the image onload is called, I then add them to the loadedImages array which is then used to load it into the slide using addSlide

Wow cpradio thats brilliant, thank you

I’m actual using the slideshow on a wordpress site so the images won’t actually be hard coded on the page.

I’ll try an work out how to use this and post again if I get stuck

Thanks again.

Sounds good.