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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Preloading & CSS

    How can I preload the following background for a <span>?

    style="background-image:url(img.gif)"

  • #2
    New Coder
    Join Date
    Feb 2003
    Location
    ROMANIA
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The same as you would preload any image using JS:

    1. create a new image object ;
    2. set its src property to the URL of the image file you wish to preload;

    I could write you some sample script, but you better check
    www.Javascriptkit.com

    or

    www.dinamicdrive.com

    There are tons of preloaders there.
    Claudiu Iacob - Romania

  • #3
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried using this script, from JavaScript Kit, but it doesn't work in this situation... the background image is not preloaded.

    Can someone show me an example of preloading an image, such as style="background-image:url(img.gif)", that works for them?

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Location
    Louisiana
    Posts
    576
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try this
    Code:
    img=new Image();
    img.src="img.gif";
    that should preload it for you.

  • #5
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what I tried, and the image does not preload...

    (-w3schools- method)

    in the <head>...

    <script type="text/javascript">
    if (document.images)
    {
    a = new Image()
    a.src = "statue.png"
    }
    </script>


    in the <body>

    <span style="width:256px; height:255px; background-image:url(statue.png); background-repeat:
    no-repeat">



    Has anyone actually preloaded a background image this way?

    It doesn't seem like using img.src="" would work for background-image:url

  • #6
    New Coder
    Join Date
    Feb 2003
    Location
    ROMANIA
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Go to that thread:

    How do I know if preloading works?

    It may help you.
    Claudiu Iacob - Romania

  • #7
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    preloading works on the assumption that the images you're loading, aren't immediately visible to the user. example: mouse rollovers. the first image is not the one that gets preloaded. we only need to load that one normally. the one that needs to be pre-loaded, is the second image, the one that we display when we move our mouse over the "mouse-over" object. if we don't pre-load it, then there will be that short space of time, just after we've brought our mouse to rest on the mouse-over, where there's nothing to see while we wait for the image to download.

    now, let's compare your scenario, to the mouse over scenario: you can't. as we stated before, pre-loading works on the assumption that the images you pre-load aren't immediately visible, and the image you're trying to preload here, is immediately visible. as such, you're not pre-loading it, you're just issuing a second command to load it.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #8
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for clarifying.


  •  

    Posting Permissions

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