How to make web page images also appear first time a web browser hits the page?

[Rousseau10]

Hi all,

How to make web page images also appear first time a web browser hits the page?

I took a screen shot when browser first loads page, then after hitting refresh one time when then the images also show up. Of course once it is cached it will load all.
How do I fix this.

Same behavior in Chrome, IE, Opera, Safari, strangely FF loaded it correct first time around.

Thanks in advance,
Rousseau

 

[Rousseau10]

Here is the first image. Somehow that link did not come up on initial post.
this is what it looks like first time a web browser loads it before hitting refresh.

http://files.engineering.com/getfil...b199dc&file=1rstTimeABrowserLoadsThisPage.jpg

 

[ChrisHirst]

How do I fix this.

Keep the image size in bytes as small as possible, you can't exactly pre-load before browsers actually DO request the page and it's images.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Olaf Doschke]

It's like Chris said, browsers do load images but start displaying a page before they have it. The image will always be loaded after the HTML and there is no way to force it. You can help the browser render the size correctly at least, by specifying image dimensions as width and height attributes of your img tag.

There would be one way of "tricking" any browser with loading an initial page, that has no body at all, but just a javascript section in it's header loading the image and html via xmlhttprequest (ajax) and then display it, but you'd better show your experience by designing a page with HTML and not with a huge image.

Bye, Olaf.

 

[Olaf Doschke]

You didn't asked, but I wouldn't call for your service discovering such a homepage, even if the image would load instantly.

Violet? It's not the right coloring.
The notebook looks really weird with it's shadow lighter than the background. That image obviously is meant to be put on a light background.
Comic Sans? Not a good Font for neither captions nor text, and the B is even out of whack.

"cutting edge, web development" without the comma, please. Otherwise you say you czt edges and do web development.

Times new Roman as font? Screen text should not have a serif font, Last time I read a web page with serif font was yours.

The heading banner should be one image, the notebook another, the bow yet another, you have all this in one huge image.

Sorry, this sounds like a personal attack, I don't have to say anything against you personally, but that's the impression you make with this home page. You look like a hobbyist.

Bye, Olaf.

 

[1DMF]

Images can be pre-loaded with JavaScript, but not prior to the page being displayed due to the way browsers load resources.

As Olaf points out, building a website out of nothing but an image is not a good way to build a site or show off any IT skills.

Also any reason you don't do Windows 7?


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[spamjim]

I think the original question and discussion may be missing the issue. The question mark in the provided screen capture seems to indicate a wrong path to an image more than a slow loading graphic. The image reference appears to be repaired now.

 

[vacunita]

Going by the first image posted it seems not only were the images not loading, but the CSS wasn't either.

Also the website is in fact composed of 3 images. The header, Laptop and bottom swirl are in fact 3 separate images.

I would wager either the server is experiencing some type of issue on the first load (though I cannot replicate the issue) so it does not load the external sections like CSS and images or more likely a connection issue in the OPs location is causing it. More likely, since accessing the OP's URL

http://www.compumasternsb.com/default.htm

yields no such issues for me on Chrome or FF.
However in FF, the website seems to have other floating and margin issues. Such that the text paragraph pushes outside the black background and into the white, and half of it is unreadable.












----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Olaf Doschke]

>Going by the first image posted it seems not only were the images not loading, but the CSS wasn't either.
I first thought the same, but in the image of the final look the font still is the same.

And since there only is one icon for a mmissing image in the before screenshot I assumed all background is just one image. I was not so "clever" to simply open up

http://www.compumasternsb.com.

Good, one problem less than assumed, still enough remaining.

Bye, Olaf.

 

[vacunita]

The font is not set, but the background color and the header and footer images are css controlled.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Olaf Doschke]

I see you have worked on the site.

Try it with other fonts online, eg

http://typewonder.com/show/FxDhJZ/438

Bye, Olaf.

 

[Olaf Doschke]

And "XP, Windows, Vista, and Windows 8/8.1" should rather be "Windows XP, Vista, and 7/8/8.1)

 

[1DMF]

Why do people seem to consider 8.1 as a version of windows?

IMO it's a service pack!

It's like that crazy 98/98SE M$ did!

Now they are skipping Win 9 for 10? - talk about lost the plot!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[Olaf Doschke]

As the target audience is not computer affine (needing a service) you may simply write "Windows XP or higher". If a customer is looking for support for his exact Windows version, it's not a bad idea to mention 8.1 explicitly. Way back Win95 a or b made a big difference.

Bye, Olaf.