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 9 of 9
  1. #1
    New Coder
    Join Date
    May 2004
    Location
    Norway
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Preload images used in a background-url?

    Hello.

    I have a <TD> with a background-url set.
    I also have a onMouseOver effect that changes this image.
    This works fine, though I would like to preload these images, as some of my users experience flickering.

    Is there a easy way to do this, as we normally preload other images?

    (Please don't say I should use <img> insetad, as there is a reason for me not doing that... )

    Regards,
    Rune

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nah just preload them like normal, then when you do the background-image swap it will come from cache, providing you refer to the same image at the same address.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    New Coder
    Join Date
    May 2004
    Location
    Norway
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So, I should only use a script like this in the head?

    if (document.images)
    {
    img1 = new Image();
    img1.src = "myPreloadImage.gif";
    }


    But is this correct?
    Do I need to make it part of a function and call it? Hmm. Help me please.

    Rune

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    That's just fine but if you have multiple images to preload, it's better to put them in an array.
    Code:
    function preloadImages(){
      var arrImgs = new Array("myPreloadImage.gif","myPreloadImage2.gif", ...);
      var arrPreload = new Array();
      for (var i=0;i<arrImgs.length;i++){
        arrPreload[i]=new Image();
        arrPreload[i].src=arrImgs[i];
      }
    }
    preloadImages();
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New Coder
    Join Date
    May 2004
    Location
    Norway
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, thanks, but what about this:

    1: All this goes in HEAD?
    2: Can I just refer to these images in a background-url as well? All I need to do it to use the name "myimage.gif" ?

    Rune

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    That goes in the head. You preload all your images that are used in swapping, be it background image or image in <img> tag.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unless your background is tiled, you can use a "sliding door" method. I don't remember ALA link, but I have a page that illustrates it: www.vladdy.net/Demos/SubmitImage.html.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, brothercake.
    Never seen the page you linked before, but I do remember ALA article about the same method....
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

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