SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image loading

    hi all...

    in the stylesheet, i'm using an image as a background for an element like:
    backround: #FFF url(pic.jpg) no-repeat 0 0;

    i've put this as an external stylesheet and the reference to this is within the <head> tag.

    when will the browser load this image ?
    a)as soon as the external stylesheet is loaded and the browser sees this image OR
    b) when the element that uses this image appears in the DOM

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Definitely not a.
    Probably not b.

    I would expect it to be:
    c) After all foreground images have completed loading (assuming the element is visible)

    If you view Firebug's "Net" tab as the page is loading, you should be able to see when the image begins loading.
    From the English nation to a US location.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh...i didn't think about the 'c' option....
    you've got a good point there @awestmoreland

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i guess i'll modify the question.

    when will the browser load the background images for elements (links etc.) ?

    a) As soon as the external stylesheet is loaded and the browser sees this image
    b) When the element that uses this image appears in the DOM
    c) After all foreground images have completed loading

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can someone please confirm when will the background image be loaded?

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I don't have a computer slow enough to find out. I do know that, for example, image who only appear when someone :hovers an element is NOT loaded/requested from the server until that :hover event occurs.

    The background image may be called from the server when the stylesheet is, but it certainly cannot be applied until after the element holding it is rendered.

    Since IE only makes two requests at a time, while Opera can do 8, it may not even be the same cross-browser.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    From what I have seen it also depends on the file sizes. I have seen small BG images load and display before larger html images completed loading. Those results are also based on connection speeds.

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2010
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure but i come with another scenario: depends on browsers rendering engine. I know everyone has it's own rendering engine.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I have seen small BG images load and display before larger html images completed loading.
    did you mean small BG images may load and display before larger foreground images complete loading?


    Quote Originally Posted by Stomme poes View Post
    I do know that, for example, image who only appear when someone :hovers an element is NOT loaded/requested from the server until that :hover event occurs.
    i didn't knew this. are you sure about this? in that case, when the user :hovers over an element that has a background image, then there will be a delay the 1st time the user hovers over the element know?

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    i didn't knew this. are you sure about this?
    If your connection is slow enough, you'll see the delay here as you hover over each smaller image, a whole new image (so not a sprite) is loaded in the middle. Faster connections may not see the delay.

    did you mean small BG images may load and display before larger foreground images complete loading?
    The browser starts in order of the HTML from top to bottom. Assuming the browser is internet exploder, there can only be two persistent connections at a time. So here's how it goes, if I understand it correctly:

    ...assuming head, css already passed through...
    <body>
    <div>
    <img src="foo.jpg" width="400" height="600" alt=""> <--let's call this a large 300kb jpg
    <p>some content...</p>
    <img src="bar.gif" width="4" height="10" alt=""> <-- a small 356byte gif
    </div>
    <div>
    <h1>Title</h1>
    <p>some content...</p>
    <img src="semi-trans.png" width="90" height="90" alt=""> <--a 6kb png
    <p>m0ar c0wbell!</p>
    </div>
    <div>
    <img src="foot.png" width="10000" height="20" alt=""> <--another large jpg
    </div>
    </body>
    </html>

    As the browser goes from top to bottom, it meets a call for foo.jpg. It asks the server for foo.jpg. The server putzes around for a bit and after admitting it does have such a file and the browser is allowed to have it, it starts sending foo.jpg.
    The browser continues through the page, rendering content until it sees bar.gif. It stops, asks the server for bar.gif, the server checks and replies that yes, it has bar.gif and yes, the browser can haz bar.gif, and the second connection is used to get bar.gif. foo.jpg is large and still loading. However bar.gif is small and within a short amount of time, bar.gif is in. Browser continues through the HTML until it sees semi-trans.png.
    Asks the server if it can haz, server checks, server says yes I haz, and yes you can haz, browser uses second connection to start loading semi-trans.png.

    In the meantime foo.jpg finally finishes loading. The browser now has a connection it can use... it's still loading semi-trans.png but continues through the page until it sees foot.png. Asks the server. Server checks. Server says I haz, server says you can haz, browser starts loading foot.png while finishing up semi-trans.png.

    So the smaller file (bar.gif) got loaded before the jpg, but this is because being smaller means it got entirely loaded faster and freed up a connection for something else faster.

    I dunno how it goes with images called by CSS. I don't know the order between HTML images vs CSS images once both HTML and CSS are still being read.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stomme poes......thanks buddy....that was a great explanation and nice examples.

    how many parallel connections are allowed in other browsers?

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I heard from Felgall that Opera can do 8, but I don't know if that's a default. Firefox can do more? but it's defaulted to 2 so far as I know. Actually, there's a rule somewhere in an HTTP1.1 RFC that states how many persistent connections a client is allowed to have with a server (and it might be two so maybe the other browsers are cheating?).
    --
    I looked around (googling, aha) and my terminology is a bit off: there's persistent connections (which can be set by the servers), and then there's the download limit (originally 2 items at a time).

    http://www.stevesouders.com/blog/200...eds-things-up/

    Also, I just remembered something. In Google Chrome, if you use their web developement tool, there's somewhere in there a chart it'll generate showing you how many seconds each file took and when in related to other files.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in http://www.stevesouders.com/blog/200...l-connections/ it's given:

    Browser
    HTTP/1.1
    HTTP/1.0

    IE 6,7
    2
    4

    IE 8
    6
    6

    Firefox 2
    2
    8

    Firefox 3
    6
    6

    Safari 3,4
    4
    4

    Chrome 1,2
    6
    ?

    Chrome 3
    4
    4

    Opera 9.63,10.00alpha
    4
    4



    Quote Originally Posted by Stomme poes View Post
    In Google Chrome, if you use their web developement tool, there's somewhere in there a chart it'll generate showing you how many seconds each file took and when in related to other files.
    that's really cool. i need to check that out.

  14. #14
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Also, I just remembered something. In Google Chrome, if you use their web developement tool, there's somewhere in there a chart it'll generate showing you how many seconds each file took and when in related to other files.
    in chrome's developer tools' if found a 'timeline' tab. there are 3 options shown: loading, scripting & rendering. but it's not showing anything. is this what you meant?

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I think so... I ran into it accidentally. I was looking for something else. I got a graph by default.

    Next time I'm on a computer with Chrome, I'll see where I found that.

  16. #16
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Next time I'm on a computer with Chrome, I'll see where I found that.
    thanks buddy

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by anishmsry View Post
    in that case, when the user :hovers over an element that has a background image, then there will be a delay the 1st time the user hovers over the element know?
    Yes and that's why you should pre-load your hover rollovers by either including them in the same image so that you can swap background position instead or paint them on top of each other (e.g. over state in the list element and normal state in the anchor and then just hide the anchors image on hover and let the one beneath show through).

    The background images are only loaded when called for on the page such as being displayed somewhere. If this wasn't the case then all the images in all your attached stylesheets would be loaded and you would have to wait forever.

  18. #18
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The background images are only loaded when called for on the page such as being displayed somewhere. If this wasn't the case then all the images in all your attached stylesheets would be loaded and you would have to wait forever.
    good point. in fact i was wondering whether preloading can be done by mentioning the images in stylesheets

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could use sprites to preload the images, and then use background-position to shift through the image to reach a different image.

    It's by far the easiest to get around image preloading issues .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #20
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    This is one of the best articles on using CSS sprites I know of: http://www.alistapart.com/articles/sprites

    Though I would say that I've actually encountered similar issues with my portfolio where I wanted screenshot's to only load when their required (scripting free) rather than loading everything in one go (which takes a long time if you have a lot of images going in the page). I've been taking advantage of the target pseudo to only add the background as and when the fragment anchor is called (thereby eliminating the issue of heavy initial loads). The morel from my tale is that it depends as to where the background is referenced as to whether it'll load in the cascade order or whether it'll load or manipulate the image upon a pseudo event like hover or target

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Back to Chrome: I haven't been able to recreate the page I stumbled upon. I think I was clicking stuff randomly trying to get to something specific.

    But there's a page that sorta looks like what I saw, except for me now it's always blank.

    Go to the goofy-looking paper option (next to the wrench), choose Developer > Developer Tools > Timeline.

  22. #22
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stomme poes...

    Chrome -> Developer > Developer Tools > Timeline

    it's showing blank for me too

  23. #23
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for any1 who wants to know the time at which a request for a file is sent etc.

    Chrome: Tools -> Developer Tools -> Network (in the right side, it shows timeline)

    Firefox: Use Firebug add-on -> Net

  24. #24
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...continued from earlier post,

    Opera: Tools -> Advanced -> Opera Dragonfly -> Network

    Safari: Settings -> Preferences -> Advanced Tab -> Show Develop menu in menu bar(Select this option. Now in the menu bar, there'll be a new item - Develop)
    Develop -> Show Web Inspector -> Resources

    IE: http://www.webpagetest.org


Bookmarks

Posting Permissions

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