SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    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>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Have you tried using the jQuery callback:

    Code javascript:
    $(function () {

    instead of:

    Code:
    $(window).load(function() {
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't remember what it was but

    Code:
    $(function () {
    was causing a problem.I will try it again

  4. #4
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,129
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tom8 View Post
    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?

  6. #6
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,129
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,129
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Sounds good.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •