Preload images jQuery cycle

**ttmt** · May 18, 2012 04:12

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.

Code:

#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.

Code:

<!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>

**paul_wilkins** · May 18, 2012 05:26

Have you tried using the jQuery callback:

Code javascript:

$(function () {

instead of:

Code:

$(window).load(function() {

**ttmt** · May 18, 2012 05:33

I can't remember what it was but

Code:

$(function () {

was causing a problem.I will try it again

**tom8** · May 18, 2012 05:48

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.

PHP Code:


<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.

**cpradio** · May 18, 2012 07:46

Originally Posted by tom8

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.

PHP Code:


<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?

**ttmt** · May 18, 2012 08:04

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.

**cpradio** · May 18, 2012 08:35

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

**ttmt** · May 18, 2012 08:45

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.

**cpradio** · May 18, 2012 08:47

Sounds good.

User Tag List

Thread: Preload images jQuery cycle

Thread Tools

Display

Preload images jQuery cycle

Bookmarks

Bookmarks

Posting Permissions