|
How-to load an image first on a Web page
|
| Author |
Message |
colin
Senior Member
   
Posts: 251
Group: Registered
Joined: Aug 2007
Status:
Offline
Reputation: 0
Country: 
|
How-to load an image first on a Web page
When loading a web page, what code do I need to add so that an image is loaded first? Im sure this is an easy question to answer but I really need to know.
|
|
| 09-15-2007 08:49 AM |
|
 |
smacker
Member
  
Posts: 234
Group: Registered
Joined: Sep 2007
Status:
Offline
Reputation: 0
Country: 
|
RE: How-to load an image first on a Web page
|
|
| 09-15-2007 11:51 AM |
|
 |
bunty
Junior Member
 
Posts: 14
Group: Registered
Joined: Apr 2010
Status:
Offline
Reputation: 0
Country: 
|
RE: How-to load an image first on a Web page
Hello friends
It is widely accepted that fast-loading pages improve the user experience. In recent years, many sites have started using AJAX techniques to reduce latency. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or javascript from the server and alter the existing page. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.
However, for many sites that reference dozens of external objects, the majority of the page load time is spent in separate HTTP requests for images, javascript, and stylesheets. AJAX probably could help, but speeding up or eliminating these separate HTTP requests might help more, yet there isn't a common body of knowledge about how to do so.
While working on optimizing page load times for a high-profile AJAX application, I had a chance to investigate how much I could reduce latency due to external objects. Specifically, I looked into how the HTTP client implementation in common browsers and characteristics of common Internet connections affect page load time for pages with many small objects.
Thanks for all friends
|
|
| 04-20-2010 05:32 PM |
|
 |
marlon
Junior Member
 
Posts: 30
Group: Registered
Joined: Mar 2010
Status:
Offline
Reputation: 0
Country: 
|
RE: How-to load an image first on a Web page
Hello friends
80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.
Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
Thanks for all friends
Have a nice day
|
|
| 04-29-2010 04:14 AM |
|
 |
induswebi
Junior Member
 
Posts: 19
Group: Registered
Joined: Mar 2010
Status:
Offline
Reputation: 0
Country: 
|
RE: How-to load an image first on a Web page
Here is some css coding to load an image first on a Web page.
body{
background-image: url(../images/abc.jpg);
background-repeat: no-repeat;
height: 780px;
width: 1000px;
background-position: top;
}
May be this will help u.
|
|
| 05-01-2010 08:33 AM |
|
 |
cools4u
Junior Member
 
Posts: 29
Group: Registered
Joined: Aug 2008
Status:
Offline
Reputation: 0
Country: 
|
RE: How-to load an image first on a Web page
to load image faster on web page can be achieved using cascading style sheets CSS. Add all the images in CSS code and it will solve your problem...
|
|
| 05-11-2010 08:21 PM |
|
 |