www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Problems with slow starting slide show

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    185

    resolved [RESOLVED] Problems with slow starting slide show

    I found this code for a slide show. Unfortunately once the page loads there is about a 4 second delay before the first slide starts to fade out. Can someone tell me what is causing this delay? I am concerned the viewers may leave the page before they realize this is a slide show.

    The website can be seen here: http://www.glitzandglamdesigns.com/fashion/index.shtml

    Note: This web page may not be suitable for viewing at work as it is showing a fashion designer's women's night wear.

    Code:
    <style>
    .fade
    {
     box-shadow:1px 1px 5px 2px #6DC83C;
     position:relative;
     width:300px;
     height: 400px;
     border-radius:19px;
    }
    
    .fade img
    {
     border-radius:19px;
     position:absolute;
     left:0;
     top:0;
    }
    </style>
    
    <script>
    $(function(){
     $('.fade img:gt(0)').hide();
     setInterval(function(){$('.fade :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.fade');}, 4000);
    });
    </script>
    
    <div class="fade">
     <img src="images/a.jpg">
     <img src="images/b.jpg">
     <img src="images/c.jpg">
     <img src="images/d.jpg">
     <img src="images/e.jpg">
     <img src="images/f.jpg">
     <img src="images/g.jpg">
     <img src="images/h.jpg">
    </div>
    Last edited by lkeeney; 11-02-2013 at 12:44 AM.
    Larry

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    try this

    Code:
    #things{
      position: absolute;
      top: 20px;
      left: 400px;
      background-color: black;
    }
    .fade
    {
     box-shadow:1px 1px 5px 2px #6DC83C;
     position:relative;
     width:300px;
     height: 400px;
     border-radius:19px;
    }
    
    .fade img
    {
     border-radius:19px;
     position:absolute;
     left:0;
     top:0;
     display:none;
    }
    </style>
    <script>
    function sshow(){
    $('.fade :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.fade');
    setTimeout('sshow()',4000);
    }
    $(document).ready(function(){sshow();});
    </script>
    </head>
    <body>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    185
    Thank you, but the problem with this fix is that the image shows black within the border for 4 seconds before the slide show starts.

    What I would really like is for the first image to display for about 2 seconds and then have the slide show start.

    Quote Originally Posted by Padonak View Post
    try this

    Code:
    #things{
      position: absolute;
      top: 20px;
      left: 400px;
      background-color: black;
    }
    .fade
    {
     box-shadow:1px 1px 5px 2px #6DC83C;
     position:relative;
     width:300px;
     height: 400px;
     border-radius:19px;
    }
    
    .fade img
    {
     border-radius:19px;
     position:absolute;
     left:0;
     top:0;
     display:none;
    }
    </style>
    <script>
    function sshow(){
    $('.fade :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.fade');
    setTimeout('sshow()',4000);
    }
    $(document).ready(function(){sshow();});
    </script>
    </head>
    <body>
    Larry

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    when you are talking about seconds you must understand that the user can be on slow internet connection. i have slow internet connection and pages take various time to load (sometimes more than a minute). somebody else can have connection faster than mine but slower than yours. anyway, it would be a good idea to take as the starting point the moment when the page finishes loading. i tested your page locally (offline) and it was my bad. when i put it on the server i found that it works not good. thats why i made some changes (4 changes, see the source) and now the slide show starts with timeout of 2 seconds after the last image of the set is loaded.

    live demo
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,346
    Perhaps you should process the images so that they are smaller in file size, smaller file size = faster load.

    For example, image a.jpg = 32.9KB and I got my mucky paws on it and gave it a squeeze and its now 11.1KB which is about 1/3rd the original size and I tried a more complex image, image g.jpg that weighed in at 54.3KB, groped it a bit and whammo, she lost loads of weight and is now 16.6KB.

    All I did in reality was to drop the image physical size to 80% of the original and it still shows up perfectly fine when resized.

    What are you using to process your images?
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    185
    Quote Originally Posted by \\.\ View Post
    Perhaps you should process the images so that they are smaller in file size, smaller file size = faster load.

    For example, image a.jpg = 32.9KB and I got my mucky paws on it and gave it a squeeze and its now 11.1KB which is about 1/3rd the original size and I tried a more complex image, image g.jpg that weighed in at 54.3KB, groped it a bit and whammo, she lost loads of weight and is now 16.6KB.

    All I did in reality was to drop the image physical size to 80% of the original and it still shows up perfectly fine when resized.

    What are you using to process your images?
    I use Photoshop CC to process my images. I save them as .jpg at 80%.

    I have a pretty fast Internet connection (15Mbps) and I keep forgetting that others many not be as fast.
    Larry

  7. #7
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    185
    Thank you again for your help. Your code works exactly as I wanted. Now I have to try and understand how you made it work.

    Quote Originally Posted by Padonak View Post
    when you are talking about seconds you must understand that the user can be on slow internet connection. i have slow internet connection and pages take various time to load (sometimes more than a minute). somebody else can have connection faster than mine but slower than yours. anyway, it would be a good idea to take as the starting point the moment when the page finishes loading. i tested your page locally (offline) and it was my bad. when i put it on the server i found that it works not good. thats why i made some changes (4 changes, see the source) and now the slide show starts with timeout of 2 seconds after the last image of the set is loaded.

    live demo
    Larry

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles