I have a div (.header) contained within other divs. When my page loads, momentarily just that one .header div "flashes" white as the page is loading, especially in in Firefox, but a little bit in IE8 too. I can't find what kind of CSS or lack thereof is causing this - there's no images or background color associated with that div. There is a logo.png within the .header. Thoughts?
http://dev.bwmsnow.co.nz/
From what I can see (Firefox on XP) it doesn't so much flash as it looks like it is slow to load the header-container div, and the associated background images. If I load without cache the whole of the logo bar loads last (and is white before load), but not just the one div. YSlow counts some 50 HTTP requests which might explain some of it. It doesn't look like the page is large so much as made up of a lot of pieces that probably create some processing lag.
If I understand the question, my suggestion is an old trick of adding a background color similar to the background image to <div class="header"> so that as the page loads (but before the image loads) the user sees a color similar to the background image. That way the visual impact of the image loading is not as noticeable.
I Photoshop eye dropped your background image and suggest using #a1dff8 as the color. The CSS for should be:
.header{
background:#a1dff8 url('images/yourheader.png');
}
Also, when looking at your code, I see that you have several external JS files. You should consider a minifier. Just Google or StackOverflow for JS/CSS minification.
Related
I have searched for a couple hours on this topic, to no avail. When I view my site on mobile via Safari, sometimes pieces of the background image are missing. For instance, everything will look great, but then there will be a chunk missing in the middle. Or, perhaps instead there will be a chunk missing from the bottom. It appears to be random. Then, if I turn the phone, the missing piece fills in and even if I turn it back to portrait mode, the piece has filled in.
Any ideas as to why a section of an image won’t load? Could it be that the image is too big? Just looking for some ideas to get started with. Unfortunately, I haven’t come across this problem in my searches. Thanks.
Images should not be missing chunks. If it is a JPEG image, there is the tiny possibility your image is being corrupted in transit. Is the image being created dynamically?
But the most likely cause is that you have some html element over the top of the image that is opaque - and preventing the underlying image from being displayed.
So, I have an SVG path animated with CSS animation. This animated SVG is set as a background image of the div. The issue is that when I refresh the page, CSS background-image gets cached which leads to animation not getting executed but it shows the final fully displayed SVG. I have checked out the solutions from other users by getting random strings. This solution works by creating random strings on each refresh. In my case, I can't use any scripts. So, is there any way around this besides putting my SVG in HTML file? Thanks
I need to implement image previews via thumbnails. Now I'm not certain how to implement it.
One option would be to do it straight with CSS, so something like this:
.thumbnail {
background-image: url(path/to/image);
background-size: 300px, 400px;
}
Is that practical? Are there any performance issues?
If you scale image in CSS to be smaller than it it actually is, browser still have to download the same amount of data. You should create separate file with the thumbnail.
With images, you need to focus on three things: size, format and the src attribute.
Image size
Oversized images take longer to load, so it’s important that you keep your images as small as possible. Use image editing tools to:
Crop your images to the correct size. For instance, if your page is 570px wide, resize the image to that width. Don’t just upload a 2000px-wide image and set the width parameter (width=”570”). This slows your page load time and creates a bad user experience.
Reduce color depth to the lowest acceptable level.
Remove image comments.
Image format
JPEG is your best option.
PNG is also good, though older browsers may not fully support it.
GIFs should only be used for small or simple graphics (less than 10×10 pixels, or a color palette of 3 or fewer colors) and for animated images.
Do not use BMPs or TIFFs.
Src attribute
Once you’ve got the size and format right, make sure the code is right too. In particular, avoid empty image src codes.
In HTML, the code for an image includes this:
When there’s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add unnecessary traffic to your servers and even corrupt user data.
Pro Tip: Take time to re-size your images before uploading them. And always include the src attribute with a valid URL.
To ensure your images load quickly, consider adding the WP Smush.it plugin to your website.
from: http://blog.crazyegg.com/2013/12/11/speed-up-your-website/
In a web page I have several images which are stacked on top of each other. The CSS for the images are
img {
width: 100%;
height: auto;
padding: 0;
border: 0;
margin-bottom: 0.66em;
}
All images have proper height and width specified in the html img tag.
When the page loads on a slow connection I would like the frames where the images will appear to scale before the actual images are loaded into them. This because it sometimes looks like this:
[----------------]
[ Loaded image ]
[----------------]
[ Not loaded image ]
[----------------]
[ Loaded image ]
[----------------]
where the loaded image have the right size but the not loaded one are still just a row where the alt=text is shown.
Then, when the middle of the three loads it swells to the right size and moves the others.
I would like the appearance and loading to be the same as it would have been without the CSS: The empty frames where the image will appear shows at the right pixelsize, it is then filled with the image.
Please be aware that this of course is a problem only on slow connection, the images are not that big really.
The images are progressive JPGs.
I would like to:
Scale image frames according to css setting before filling them up with the image.
Load images in sequential order, beginning with the ones on top and continuing down the page.
Using the great Lazyloading plugin could of course be a solution, but it seems overkill.
I could also use javascript to detect window width and then change the width and height in the html tag, but this seems unnecessary.
I would prefer a solution where I don't have to alter the code for the images themselves. Preferably only with css if this is achievable.
Looking much forward to your thoughts! Thanks for reading this long post :) !
The order which objects in the page are loaded can to my knowledge not be controlled in any other way than by using a javascript. Different browsers also load the page differently:
Firefox tend to load one progressive JPEG after another, while Chrome starts loading in all of them simultaneously.
The Lazyload plugin for jQuery could be a solution, it does the placeholder and scaling of the images good, but it disables the progressive downloading of the JPEGs.
I think that putting height: auto; in the css for the image makes an improvement (image frame gets right size faster), but it's a marginal difference and I'm not sure.
Solution would be to write a javascript which uses a placeholder image first, and then sequentially reads in the images and allows them to display progressively.
Thankful for further opinions on how this script could be written or different solutions to my problem!
I want image in HTML page. I am wondering what way gives best optimization performance stand point. I have two option to load image.
Load image directly using image tag inside div of html.
Get image to div background using css background.
They would be about the same, at least if there was a difference, it would be so small you would never notice it.
Speed of load would mostly depend on the size of the image whether its set to the background in the css or placed directly in the mark-up. I think this is answering your question but it's quite vague...