SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image double-laoding problem with degradable JavaScript slideshow

    I created a slideshow with Javascript. The HTML calls a static image to display in the event Javascript is not enabled in the browser. If Javascript is enabled in the browser, it is supposed to load a random image in the place of the static image.

    The problem I'm encountering is when Javascript is enabled, you see the static image load with the page and then, if the random image is different, you see it quickly load right after that. So it looks like two images cycling on page load.

    Here is the Javascript code I'm using:

    Code:
    // Define images used in slideshow
    imgArray = new Array(
    "header_img1.jpg",
    "header_img2.jpg",
    "header_img3.jpg",
    "header_img4.jpg",
    "header_img5.jpg"
    );
    baseURL = "images/";
    
    // Preload slideshow images
    function preloader() {
    
        domElement = document.getElementById('gallery-image');
        domElement.style.visibility = "hidden";
    
        // counter
        var i = 0;
    
        // create object
        imageObj = new Image();
    
        // start preloading imgArray
        for (i=0; i<3; i++) {
            imageObj.src=imgArray[i];
        }
    }
    
    
    // Select random image to display for slideshow
    function random_img() {
    
        domElement.style.visibility = "visible";
        rand = Math.round(Math.random()*(imgArray.length - 1));
        document["faces"].src = baseURL + imgArray[rand];
        rand += 1;
    }
    Here is the accompanying HTML:

    Code:
    <body onLoad="preloader();random_img();">
    .
    .
    .
    <a href="#" onclick="f_slideshow(-1);return false;">
    <img src="images/header_img1.png" alt="" width="26" height="207" /></a>
    <img src="images/header_img1.jpg" alt="" width="529" height="197" class="img-1" name="faces" />
    <a href="#" onclick="f_slideshow(1);return false;">
    <img src="images/header_img2.png" alt="" width="27" height="207" /></a>
    As you can see, I've tried working with CSS visibility within the Javascript, but I'm still stuck with this problem.

    How do I change what I have so when Javascript is enabled, you don't see the two cycling images?

    Thanks!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    You're being affected by the slowness of the onload event.

    Instead of that, place your calls to preloader and random_img at the end of the body, just before the </body> tag.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, but I'm still seeing the double loading of the image. Here is the page with the sample code:

    http://yazminmedia.com/clients/wbailey/index.html

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ywickham View Post
    Thank you Paul, but I'm still seeing the double loading of the image. Here is the page with the sample code:

    http://yazminmedia.com/clients/wbailey/index.html
    It's the repainting of the screen that helps to cause the slowdown.

    Which web browser do you most experience the issue with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    It's the repainting of the screen that helps to cause the slowdown.

    Which web browser do you most experience the issue with?
    It used to be Firefox, but now I'm seeing the issue a lot with Chrome as well.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ywickham View Post
    It used to be Firefox, but now I'm seeing the issue a lot with Chrome as well.
    I fear that the only solution that will be acceptable for you is one that cannot be used when scripting is disabled.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shoot. What would that be, by chance?

    Do you think it's just my approach? Maybe I can get the same results with something else...

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ywickham View Post
    Shoot. What would that be, by chance?
    That would be to not have the first unwanted image referenced in the HTML image in the first place - just start with an empty src attribute.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which then makes it degrade badly in the absence of JavaScript. /sigh

    Ok. Looks like I'll have to convert this part to PHP so that I can get the result I need. Thank you so much for your help in figuring that out!

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ywickham View Post
    Ok. Looks like I'll have to convert this part to PHP so that I can get the result I need. Thank you so much for your help in figuring that out!
    You're welcome.

    The server-side solution that you have been inspired to perform is where the initial image is one that's picked at random. Then after a suitable timeout you can show the next image, and so on.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •