I'm the webmaster of http://concretetoboggan.uwaterloo.ca and a first-time web designer, so I sort of stumbled my way through CSS. I've been having a peculiar problem.
If you go to the link (for the first time), the page stalls for a noticeable 2-3 seconds on the main slideshow before loading the rest of the page. It's really distracting and seems easily fixable, but I can't fix it.
Here's the Net timeline of the site, as you can see, Firebug shows a mysterious gap.
The sequence of events that the page performs is (supposed to be):
Load jQuery at start of page
Load page
Display the first image of slideshow (the rest of the images are loaded into divs with a 'hidden' class, presumably the browser does this async)
Continue loading page
Remove 'hidden' class on DOM ready
Load jQuery bxSlider on DOM ready
Each of the slideshow slides is composed of a div with an img tag inside and a caption bar sub-div absolutely positioned at bottom:0.
I've tired the following optimizations, which helped slightly-to-not-at-all:
Remove the table that is loaded below the slideshow (seems to speed things up a bit, still stalls)
Reduce the size of the images loaded (speeds things up a bit, still stalls)
Put the img 'src' in a 'dsrc' attribute and then reassign it on DOM ready (still stalls)
Put the images in background: CSS of div (unwanted layout issues)
Oftentimes, the 'stalling' is due to the page not having sufficient information to calculate the layout, because it doesn't know the dimensions of the images until it's loaded them.
If your happen the know the dimensions of your images, you can avoid this particular problem by changing your <img> tags from...
<img src="myimage.jpg"/>
...to...
<img src="myimage.jpg" width="640" height="480"/>
...or whatever they happen to be.
However, there are a zillion other reasons why the page might be stalling.
Update
Another thing that you can sometimes do to speed things up: if you're loading a script with the <script> tag which isn't required to render the page, but is only used to process subsequent user input, you can defer the script loading until after the page has rendered by adding the defer attribute, e.g. change...
<script src="http://someslowsite.com/somescript.js">
...to...
<script src="http://someslowsite.com/somescript.js" defer="defer">
...but if you need the script to render the page, then this won't be possible. If you think the user will be able to load the script from your site faster than a third-party site, then make a copy and host it yourself.
Related
I can't seem to find an answer to this rather interesting problem. In google chrome, images that have a set width and/or height, either using attributes, inline styling or css styling, refuse to show up on the page on initial load. They only seem to appear after there has been some page activity. Yet, if you let the images load to their natural size they display on page load perfectly fine. The images can be seen as it works in other browsers and when inspecting elements in chrome the image is display in the popup window.
Any know how to fix this?
define what you mean by: 'after some page activity'.
You also mentioned that the it happens when you have set width AND/OR height which leads me to believe in some of your testing your ommiting width OR height so it can be calculated by the browser. if that is the case then yes the image will never look proper and the elements will have no size on initial page load UNTIL the image is downloaded, the browser inspects the image and determines the dimensions missing to create the bounding box.
Edit:
After looking at your online site, my previous comment explains the gist of it but I can see that you're setting a width of 'auto' which requires the browser to load the image first and detect the sizes. Which will cause a delayed 'reflow' in the browser rendering. Set your widths and heights otherwise they will need to calculated by the client browser. And if you have not so good pc it looks sluggish. On my system if i hard refresh with no cache sometimes i get all the thumbs and other times I don't and the delay is very noticeable.
So in short make your images always have a width AND height.
Edit:
You also have some 404 errors that can cause some latency. http://www.webpagetest.org/result/120725_0C_3N6/1/details/
Edit:
I think your only option is to load the bg image first by getting it higher up in the order of resources downloaded so it loads in as fast as possible to be rendered.
One trick might be to load the bg image in a hidden div to preload it right away so the browser downloads it first. And even if you do that you should expect to see some flash of black background while you wait for the high res shot to download and get loaded. Can't set widths and heights on background images anyways. Going further you can speed up the response time maybe by loading all the thumbnails with an AJAX call AFTER page loads so they don't even compete with the big photo shot and start downloading until the dom is fully loaded. You can even put a nice effect in there to maybe fade in the thumbnails loading or something to that effect.
Is there a way, without javascript, to load a small image for a background before the real image is downloaded? Without javascript because I know how to do it with it.
I can't test if the following CSS3 would work because it works too quick:
body {
background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}
If the tinypreload.jpg is only, say 20k, and the hugefile.jpg is 300k -- would this accomplish the task? I assume that both downloads would start at the same time instead of being consecutive.
Update
Timing the results using Firefox's profiling revealed that it's not practical / not worth it to load a smaller background first. Main reason is the connection time. For tiny pictures it's the same time to connect as it is to download the content. For images where this becomes worth it -- the file size is not recommended for mobile.
If you still want to achieve this effect - combine all your "necessary" images into 1 file and display them as cropped background with correct offset. Load your high-res images through javascript, and update the content afterward.
You could exploit css load order and overrides to achieve this result.
Try loading the small image from your main css file and then put a <style></style> tag at the bottom of the html page. The inline style will override the main style but will load last because of it's position in the code.
The difference would be milliseconds though, so it may be too quick. It's also hacky and would result in invalid, but working code. Worth a shot though.
If you're trying to fix a mobile problem then have a look at this article on context specific images as that might be a more effective way to go.
This article on CSS3 multiple backgrounds may also help, as you may be able to exploit the stacking order to achieve the result you're after
It would be useful to know what problem you are trying to solve beyond load order, as it's hard to give advice on this one.
As I said in my comment you can use the 'net' tab in firebug for firefox (called timeline in chrome) to see the actual load order on your page - you can even filter it (on firefox) for CSS only or images only - this will enable you to test.
I created and coded my own css navigation bar (inspired by apple, if that helps you visualize), that means i have dynamic buttons with 4 states that i manage with a css stylesheet. I only have two graphics, one with the button states, and another with the stylized "text".
However, i'de like to make it so that the nab bar's graphics are preloaded in my webpages.
1) is this possible ?
2) is it useful ?
3) if yes to both questions what would be the code ?
I don't really see the point in preloading those images. If the images are static and always refer to the same file without parameters, they will be cached anyway by the browser and only loaded the first time a visitor comes to your site (unless you prevent caching with some fancy http header settings), and served out of the clients browser cache on further requests. Do you have an example of your navigation to look at?
if you are concerned about loading times your could quite easy have a navigation similar to apple.com by using css3-gradients for the background, border radius for the outer container and only declare a background-image in you IE stylesheet as fallback option, so modern browsers wont requests the IE background pattern.
Add some 1px offset text-shadow to give your navigation some 3d look.
You can preload images either by using JavaScript, or by inserting img tags early on in the page with styling to hide them.
JavaScript example:
<script>
image = new Image();
image.src = '/path/to/image.png';
</script>
You'll need to do the "image = ...", "image.src = ..." for each image you want to preload. This code will load the image into the browser's cache.
HTML/CSS example:
<img src="/path/to/image.png" style="display: none;" />
The above will load the image, but won't display it on the page.
I'm developping a card game.
I have an ASP.NET page with some 52 small images (the cards), say 300 Kbytes in total.
When the page loads for the 1st time the effect is ugly: User can see each card being loaded in turn.
Moreover, only some images are to be displayed after page loads.
Hence the big issue:
I can't make the images hidden from ASP.NET since if hidden they are simply NOT rendered within the "dynamically generated" aspx page!
And of course when I use a js function fired from windows.onload event, then the user will see all the images before I can hide them in javascript!
The dirty way would be to create a Div that would be displayed in front of all other objects since I use absolute positioning.
I'm quite sure you all gurus, you have better ideas!...
If all of the images are enclosed in a single element (say, a div) then you can set its CSS to display: none by default so that even during page rendering it won't show to the user. Then, when all of the content is loaded, display it to the user. Something like this:
<style type="text/css">
#imageContent { display: none; }
</style>
<div id="imageContent">
<!-- your images are here -->
</div>
<script type="text/javascript">
// assuming jQuery because, well, come on
$(document).load(function() {
$('#imageContent').show();
});
</script>
Now, this makes no guarantees that it won't take a long time for the images to load, resulting in the user not seeing any of them for a while. And if some of them fail to load then I'm not sure what would happen. I imagine the event will still fire once the DOM gives up on trying to load the failed resources.
Naturally, you'll want to style around all of this so that the transition from no images to all images is a smooth user experience. If it takes a few moments then the user may already be interacting with the page when the images suddenly load and move stuff around (I haven't seen your page, so maybe that's not an issue.)
So you'll want to test something like this one a known slow connection or with known broken images to see how it all behaves.
I have a small idea of how such things oftenly done in different jQuery libraries.
The idea is to pack all the cards in ONE image and show different patrs of the image by setting this image as a background of the div and change offsets.
Google does so, for instance. Take a look:
http://www.google.ru/images/nav_logo83.png
This is the elements used at SERP
my Page has many hover images, sometimes there are backgrounds from div-elements or src in img-tags.
Now I have the problem, that when the page is not fully loaded (90% for example), and you want to click an menu item before it's 100% loaded, the image hover of the menu item is not loaded too. So when you haver than, you get an empty menuitem or empty field (whatever is it without that image).
How can I preload my hover images?
You can combine all images into one "master" image and then show slices of it where necessary. This technique is known as CSS sprites. Then there will be just one single image to load. After that all parts and pieces will already be there.
I agree with Developer Art. Go down the CSS Sprites route. The other benefit to them already being there is you reduce the number of requests to the web server which in terms of performance is always a good thing.