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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2003
    Location
    South Africa
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Preloading images

    I just thought this might be useful - short little pre-loading of images on webpage.


    Code:

    <body onload="preImages()">

    <script>
    function preImages(){
    if (document.images){
    aImgSrc = new Array("image1","image2","image3");

    aImgLst = new Array ();

    for(counter in aImgSrc){
    aImgLst[counter] = new Image();
    aImgLst[counter].src = "images/" + aImgSrc[counter] + ".jpg";
    }
    }
    }

    </script>
    Rolf Hansen

    "I may be stupid but i'm not good-looking"

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's another simple one:

    Code:
    var myImg = new Array('../img/title.gif', 'menu.gif', '../img/logo.gif', etc.);
    var myImgLen=myImg.length;
    for (var i = 0; i < myImgLen; i++)
    {
    	var tmp = new Image();
    	tmp.src = myImg[i];
    }

  • #3
    New to the CF scene
    Join Date
    Jun 2003
    Location
    South Africa
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, always yet another way to look at it - thanks.

    The only reason for the 'if (document.all)' is to ensure that the browser does not err. if it does not support it - If the browser version is known, the function can become quite a bit smaller.

    I have the code calling the function from the body tag, to only start loading the images after the page has been loaded, therefore necessitating putting the code in a function.

    If all the extensions of the files are the same, it is easier to only put the name in the array and add the extension to the 'src' assigning line:

    /**/
    var myImg = new Array('../img/title', 'menu', '../img/logo', etc.);
    tmp.src = myImg[i] + '.gif';
    /**/
    Rolf Hansen

    "I may be stupid but i'm not good-looking"

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Skyzyx
    Here's another simple one:
    I don't think so. To the best of my knowlege, for loops don't introduce their own scope, so the variable tmp is overwritten at each iteration - certainly before the image you call can be loaded. So that effectively will preload only the last image. An array is needed to correctly preload each image. If you want to test it, just add this line after assigning the src property

    tmp.onload = function() { alert( this.src ) };

    I should note that preloading is beneficial only if you use the image objects you create during the preloading later on. Preloading images as JSObjects will give little-to-no benefit in speeding up the loading of images in your HTML, nor will they help image swaps (such as rollovers, a common use for preloading) unless you use those JSObjects in the swapping script.
    Last edited by beetle; 06-17-2003 at 03:42 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #5
    New to the CF scene
    Join Date
    Jun 2003
    Location
    South Africa
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I do agree with most of what you said. I have to say though that I do not use the array to swap my images later - my images get preloaded. They get downloaded to the temporary internet files and are recognised by IE when changing the images with another script.

    I am not too sure if I perhaps didn't understand you correctly ;- D
    Rolf Hansen

    "I may be stupid but i'm not good-looking"

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes - you understood me correctly. And you are right - IE will pull the image from the temp files.

    But - ever notice how if you leave a page up for a while, then try to use the rollovers? They are pulled from the server again. You get MUCH better performance from images swaps if you use the JSObjects that you preloaded the images into.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looking at it again, it would seem you were right. How 'bout this:

    Code:
    var tmp=new Array();
    var myImg = new Array('../img/title.gif', 'menu.gif', '../img/logo.gif', etc.);
    var myImgLen=myImg.length;
    
    for (var i = 0; i < myImgLen; i++)
    {
    	var tmp[i] = new Image();
    	tmp[i].src = myImg[i];
    }


  •  

    Posting Permissions

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