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
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts

    does display: none; stop backgrounds from loading

    Hey all - it's been awhile,

    I've been working on a new project, and I have stumbled across something that stumps me a little. I'm using css pop-ups via :hover and these pop-ups are given a background-image. Example:
    Code:
    div.play-item:hover p {
        [...]
        display: block;
        width: 193px;
        background: url(../inc/pop-bottom2.png) no-repeat left bottom;
    }
    Obviously, if a user were on a slow enough connection they might not see the background image until it finished loading. I don't have a slow enough connection to test on, but I was wondering if assigning the background-image to the p element at the same time I give it the display: none; property will "preload" the image?
    Code:
    div.play-item p {
        display: none;
        background: url(../inc/pop-bottom2.png) no-repeat left bottom;
    }
    My first thought was that this would definetly solve the problem, but considering that elements with display: none; "create no box at all" (w3.org) I started to doubt. Anone have any idea if the background image will indeed preload?
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, it won't.
    Sorry

    If you used visibility:hidden it MAY work, but I still have my doubts.

    One way you could achieve this would be to use background-position:; to push the image out of the boundaries of the <p>... except it won't work in IE.

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    what about "height: 0"?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning?

    How 'bout positioning the entire p off the screen with a large negative value?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Have we had this conversation before, only in reverse?

    http://codingforums.com/showthread.php?p=278071


  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Okay, I give up

    Richard,

    Whoops...
    Somehow I managed to completely miss your post in that one. I even ended up trying my own suggestion out for myself, actually using p's instead of images. Worked a charm, by the way.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66
    How 'bout positioning the entire p off the screen with a large negative value?
    Wonderful! Also, thanks for the example rmedek-I didn't think the idea would work until I witnessed it live. I would have thought positioning the element like that wouldn't have hidden it and that you would have been able to scroll up and see it. I was quite wrong. Great method I didn't even think about-thanks all!
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I thought all was good, but the pop-ups fail in Opera 7.54 (the only version I have) now. Everything is fine until the first pop-up, which while it appears perfectly normal on mouseover, does not disappear on mouseout. I'll look into this a little more, but perhaps in the end I will just forego the pre-loading... hopefully the images won't take too long to load (combined 2.5kb).
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.


  •  

    Posting Permissions

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