TwitterFacebookGoogle

web development tutorials

Tag Archives: image preloading

css sprites image preloding

Posted on by Posted in css, Html

Image pre loading with css and image sprites

We discussed image pre loading with javascript in my previous post.but it can’t be use full when javascript disabled browsers (off course use disables).So i got one idea how to implement without javascript for image preloading .

With Hidden Div Element

here the trick ,we know that browser loads all the assets (images,audio,embed elements ) as they appear in the HTML document.So we create a dive and hide and make it null style element .put the images which you want to load .

using css image sprites

for tri state button we need three image for each state (normal, hover, focus) by default we load normal image back ground. when we hove first time the second image loaded . so we use images sprites. as shown

Sample Sprite image for tri state buttons

Sample Sprite image for tri state buttons

Download Example Source code

image-preloading-with-css-sprites source code

Example for HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Preloading With CSS and Sprites</title>
</head>
<body>
<!--
please visit for detailed tutorial http://www.maheshchari.com
Here we use simple trick ,it work even without javascript
first create a div element with given style attributes specified above.
include the images  which to be preloaded.
remember put this div after the body tag,
since this element is first rendered,
all the images are loaded before they used
 -->
 image-preloading-with-css-sprites
<div id="preloader_div"> <img src="amphi-thetre.jpg" /> <img src="amphi-thetre1.jpg" /> <img src="amphi-thetre2.jpg" /> <img src="amphi-thetre3.jpg" /><img src="ex-sprite.png" /></div>
<div id="wrapper">begin your work here.</div>
<h3>Preloading with images sprites example tri state button.</h3>
<ul id="tributtons">
  <li><a href="http://www.maheshchari.com/">button1</a> </li>
  <li><a href="http://www.maheshchari.com/">button2</a> </li>
  <li><a href="http://www.maheshchari.com/">button3</a> </li>
</ul>
</body>
</html>

Css sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<style type="text/css">
<!--
 
#preloader_div {
	display: none;
	height: 0px;
	width: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
}
<!-- tri state buttons -->
#tributtons {
	list-style-type: none;
}
#tributtons a,a:visited {
	display: block;
	background-image: url(ex-sprite.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	width: 150px;
	height: 24px;
	text-decoration: none;
	text-align: center;
	text-transform: capitalize;
}
#tributtons a:hover {
	background-position: 0px -24px;
}
#tributtons a:focus {
	background-position: 0px -48px;
}
 
-->
</style>

Download Example Source code

image-preloading-with-css-sprites source code

javascript image preloading

Posted on by Posted in Html, javascript

Image Preloading with JavaScript

Now a days web visitor prefers to see fancy page designing .when designing most attractive web page ,it becomes must use lot of images ,back grounds ,animation effects.
When page becomes more attractive with lot of images, it takes time to load all the images and it consumes the user bandwidth.
Generally each embedded page elements like images, audio, video objects are loaded when browser makes HTTP request to server. When it comes to tri state buttons, mouse over image, loading large images, the user wait to see effects at first time. After loading first time browser will cache the image.

Image Object

So over come this first time loading of image we use JavaScript image object for loading.
We create an image object instance before web page body loaded, so the browser will make HTTP request before the required mouse over, image hover effect, tri state buttons.
Most advanced browser now a days use DOM, so it works on all browser.

CSS and Sprites

for javascript disabled browsers we can use css & sprite image preloading.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image preload</title>
<script type="text/javascript">
function preload_images(){
	img_length=preload_images.arguments.length;
	for(var i=0;i<img_length;i++){
		src=preload_images.arguments[i];
		img=new Image();
		img.src=src; //here we make http request
	}
}
// we are calling the function there by making HTTP request for images before page body loads
//here we use function argument property for multiple images
//remember all the image paths can be absolute or relative
preload_images('myimg.gif','urimg.jpg');
</script>
</head>
<body>
</body>
</html>

download source code

image-preloading-javascript-source-code