Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.

Rousseau10

Programmer
Feb 22, 2005
242
US
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

 
 http://files.engineering.com/getfile.aspx?folder=b538dece-f7c3-47f1-a8e6-523ee70e55af&file=SamePageAFterOneRefreshB4InitialltCache.jpg
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
 
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.
 
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.
 

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
 
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.

 
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 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
 
>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 Good, one problem less than assumed, still enough remaining.

Bye, Olaf.
 
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
 
And "XP, Windows, Vista, and Windows 8/8.1" should rather be "Windows XP, Vista, and 7/8/8.1)
 
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
 
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.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top