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
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 :).
good point. in fact i was wondering whether preloading can be done by mentioning the images in stylesheets
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.
thanks buddy
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.
in http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/ it’s given:
Browser [CENTER]HTTP/1.1[/CENTER] [RIGHT]HTTP/1.0[/RIGHT]
IE 6,7 [CENTER]2 [/CENTER] [RIGHT]4[/RIGHT]
IE 8 [CENTER]6[/CENTER] [RIGHT]6[/RIGHT]
Firefox 2 [CENTER]2[/CENTER] [RIGHT]8[/RIGHT]
Firefox 3 [CENTER]6 [/CENTER] [RIGHT]6[/RIGHT]
Safari 3,4 [CENTER]4 [/CENTER] [RIGHT]4[/RIGHT]
Chrome 1,2 [CENTER]6[/CENTER] [RIGHT]?[/RIGHT]
Chrome 3 [CENTER]4 [/CENTER] [RIGHT]4[/RIGHT]
Opera 9.63,10.00alpha [CENTER]4 [/CENTER] [RIGHT]4[/RIGHT]
that’s really cool. i need to check that out.
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/2008/03/10/ie8-speeds-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.
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?
@Stomme poes…thanks buddy…that was a great explanation and nice examples.
how many parallel connections are allowed in other browsers?
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.
did you mean small BG images may load and display before larger foreground images complete loading?
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?
I’m not sure but i come with another scenario: depends on browsers rendering engine. I know everyone has it’s own rendering engine.
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.
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.
can someone please confirm when will the background image be loaded?
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
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.
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.