I have an odd issue. Sometimes when I load the website I've created within IE8, my main content block loads, the background color for the entire page loads, but the background image I've declared hangs for about ten seconds before suddenly appearing.
This does not happen in FF, Chrome, Safari, or IE10. Have not tested in IE9. I've read that you should try to minimize the size of the background image, so I got it down to around 100kb.
I'm just hoping that someone could give me some insight into why IE8 would hang on loading a background image. Here are links to my page, and my CSS code. Also, keep in mind that I am using GetSimple CMS, so all of the absolute paths I'm using are on purpose as this CMS requires it.
http://expirednews.net
http://expirednews.net/theme/CornerShop/css/style.css
Picture of what is happening:
http://i.imgur.com/ES3LXOf.jpg
I would guess that it's just taking a long time to load in. You've got a lot of graphics there, and the background image will load last. You might consider further delaying the slideshow, and dynamically loading the images into it after both the page has completed, and a small timeout, even 100ms should help significantly.
Another alternative, is to put the background image in an actual img tag that is hidden via css. This should cause IE to load the background image before all the slideshow images. A little bit hacky, but quick and dirty.
Related
I built a personal website some time ago but there's a slight glitch in the profile image in HomeScreen.jsx.
The image appears to slighty glitch around when you first load the site on a browser. Following this, all subsequent visits work flawlessly and there's no glitch. (Glitch : It loads a red background before the actual image weirdly) The situation is the same on both Chrome and Mozilla.
I've used an ordinary image tag and I'm not quite sure what the problem is.
Kindly find below:-
Site: https://jeremytinkers.github.io/beholdjeremy/
Code: https://github.com/jeremytinkers/beholdjeremy/blob/master/src/screens/HomeScreen.jsx
As a dimming/darkening work around to the notorious white flash in between Chrome page loads, how could the small default loading notification (below) be exploited to cover the entire screen?
In other words, is it possible to create an entire wall of text in between page loads such that a high contrast extension could then darken the entire screen just as it darkens a small portion here?:
This is quite hacky, but for good reason. All other solutions no longer work for Chrome 40+:
https://superuser.com/questions/580228/prevent-white-screen-before-loading-page-in-chromium
Google Chrome - Override White Blank page between webpage loads
https://superuser.com/questions/831742/how-do-you-change-chromes-background-color
No, it's not possible to change what that status bar shows, not without digging into Chromium's source (but then you could just change how about:blank looks).
The idea is indeed way too hacky.
Do background images and embedded images take about the same time to load on a HTML page provided they are the same size? If I am to use the same image twice in a page - once as a background and once as a normal embedded image, which loads faster?
For making a website compatible with screen readers, what's the best way to include an image? Are background images read well by screen readers or do they simply ignore the background images?
Do background images and embedded images take about the same time to load on a HTML page provided they are the same size?
I would say yes, but I think it also depends on how they are loaded. There used to be a practise called image pre-loading. I never did speed tests personally to know if it was really benefitical.
For making a website compatible with screen readers, what's the best way to include an image? Are background images read well by screen readers or do they simply ignore the background images?
Screen readers do not announce that <body>, <div>, etc has a background image attached. There is no magical place for an alt attribute in this case. You need to keep in mind that you're keeping good contrast between your image and your text color. WebAIM has a great color contrast checker, in my opinion.
If you are using CSS to position text over an image that's used as background, so you can give it an alt, don't. That image probably should have a null alt (<img src="..." alt=""/>) anyhow.
If you use an image both as background AND as image (i.e. Using the same image twice) you technically only need to load that image once, assuming your images are properly cached...
That is once you loaded an image with a cache header, or that image is downloading, the browser will either load it from the cache or wait for that one image to finish loading.
As to whether background images and embedded images take about the same time to load. Let's get some context. As per google: https://developers.google.com/speed/articles/browser-paint-events
Finally, notice that each image itself renders progressively, so that
the the user begins to see the image content before the entire image
has finished loading. Modern browsers render images in HTML tags
progressively. By contrast, many browsers do not render images
specified using CSS background-image attributes progressively. To
enable progressive rendering of images, use an HTML tag instead
of a CSS background-image attribute.
So an image using the <img> tag will load faster and not hold up the DOM from being ready unlike an inline css background-image in older browsers which could slow things down.
However, the caveats with progressive rendering of an <img> are that, if your image is not fully loaded when the widow.onload event fires (which is almost always true for large images), it makes for a rather ugly progressive rendering, as well as causing a paint reflow when the image is set as responsive using auto-width and/or 100% width.
To make inline images load much faster and in a much nicer way, what I did is:
First, preload them extremely early as css backgrounds in AND on the <head> of the page. You can start preloading some or all of your css images too that way, before your css file or body have been parsed.
Second, to go around the other drawbacks, I use a javascript lazy-load-ish method to hide the image on the interactive event before the window loads.
And finally, bring the image as a fade-in once the css-called image has finished loading.
You can see a live example at: http://www.nptr.net/1614
So while an embedded image is best. If you care about the best speed for your page load, I highly recommend to preload large images early via css background(s) in the head, especially if you must use them as backgrounds right away.
That is because otherwise, images in your body will have to wait until both your css file(s) and synchronous javascript(s) are fully received, until the browser actually starts retrieving them. Which generally incurs a 100 to 500ms delay, with the worst delay being on the first page load.
Working on an image heavy website, discovered a strange bug(?) in Firefox. Any CSS background properties are rendered onto transparent png's. It occurs after the initial render, during the cache refresh. This appears as a flicker if you're using broadband but becomes extremely noticeable as you scale down bandwidth.
General progression of the issue seems to be:
Page and images rendered from cache
Firefox removes the cached images.
Firefox begins to reload images but displays a box with the CSS properties of the background.
I've recreated a (hideously colorful) example, but you may need to use fiddler, or another program with bandwidth throttling/emulation to see anything more than a flicker. Obviously, you'll also have to load once and then refresh to experience the error. And again, it's only in Firefox.
I have tried a plethora of various suggestions, none worked. Just need a fix, hacks will work as long as they don't effect other browsers.
EDIT: Here's a video so you can see it in action.
Since I cannot recreate the issue on my Firefox (10.0.2) on my computer (Win 7) with my particular hardware (which may or may not be a part of this problem), I offer the following as a guess at a solution, though one I would have assumed you tried already.
Target your img tags (preferably with some css more specific than below) that you have the issue with and try setting one of the following:
Either:
img {background-color: transparent;}
Or:
img {background-color: transparent !important;}
Update: Another Possible Workaround
Have javascript make the relevant img tags invisible to start and also bind an event to them so that when they load, they become visible again (JQuery example):
$('img').css('visibility', 'hidden'); /*not using "display" keeps layout*/
$('img').bind('load', function() {
$('img').css('visibility', 'visible');
});
I cannot test the above, so no guarantee it will work, but is another idea.
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.