Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Delay Image Loading

    I have hunted around for a solution to this but I'm unable to get a satifactory answer. I am using DOM to swap between DIVs to give the effect of a tabbed display window. Each of the DIVs contains its own images. I don't want all of these images to load with the page but rather just to load when the relevant DIV is selected. (All but 1 DIVs are hidden initially.)

    By default, is this the case? Or can I use a function to not allow the images to load until I tell them to?

    kindest regards

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Just run a function to load the appropriate images when the div is shown, not sure which would be the best way to reference the image tags though, ordinal or by name.

    You could wrap them in a div something like

    <script>
    <!--
    var YourImages = [
    ["pic1.jpg","pic2.jpg","pic03.jpg"],
    ["pic04.jpg","pic5.jpg"],
    ["pic6.jpg","pic7.jpg","pic8.jpg"]
    ]

    function getImages(n){
    el=document.getElementById("div"+n).getElementsByTagName("img")

    for (i=0;i<YourImages[n].length;i++) {
    el[i].src=YourImages[n][i]
    }

    }

    // -->
    </script>

    <a href="#null" onclick="getImages(0)">Tab 1</a>
    <a href="#null" onclick="getImages(1)">Tab 2</a>
    <a href="#null" onclick="getImages(2)">Tab 3</a>
    <BR><BR>

    <div id="div0">
    <img src="" id="pic0" width="150" height="75">
    <img src="" id="pic1" width="150" height="75">
    <img src="" id="pic2" width="150" height="75">
    </div>
    <div id="div1">
    <img src="" id="pic0" width="150" height="75">
    <img src="" id="pic1" width="150" height="75">
    </div>
    <div id="div2">
    <img src="" id="pic0" width="150" height="75">
    <img src="" id="pic1" width="150" height="75">
    <img src="" id="pic2" width="150" height="75">
    </div>
    Last edited by Mr J; 01-20-2006 at 08:09 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My friend! Thank you sooo much. That is the business. In an age of broadband it probably isn't too necessary but I guess we must still cater for those browsing by the minute.

    Thanks again

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You may also create the pictures (or the whole DIVs) at a time, using DOM methods (createElement, setAttribute, appendChild ... and so on). It depends on what you want and how your page looks like.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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