Preloading images using JavaScript

August 13, 2008 at 11:46 pm (Learning)
Tags:

Now a days, website design using images becomes popular trends. As Internet speed increases, designers can now use images for website design more freely and frequently. But if our targeted user base has slow connection, then they may experience a broken site. Images are loaded part by part. Web browsers start to build the output as soon as it start to get the html. So the user may see a broken site as all the design images on that page is not loaded first. To overcome this problem we can use JavaScript. We can use JavaScript to preload the design images for any page at the very first moment of loading the page. We can put the JavaScript code below inside our <head> tag so that the images are started to load as soon as the page started to load. After that we can use the images in normal way. If we put the CSS codes after that, then the page will be built without any broken look.

<script type="text/javascript">
   image01 = new Image();
   image01.src = "http://mywebsite.com/images/1.gif";
   image02 = new Image();
   image02.src = "2.jpg";
</script>

If we have many images for any page, then we can use array to load
images. For example,
<script type=“text/javascript”>
if(document.images)
{
imgPreloader = new Image();
ImageUrl = new Array();
ImageUrl[0] = “http://myweb.com/images/topbar.png”;
ImageUrl[1] = “http://myweb.com/images/sidebar.png“;
ImageUrl[2] = “images/mainbanner.jpg”;
for(i = 0; i <= count(ImageUrl); i++)
{
imgPreloader.src = ImageUrl[i];
}
}
</script>

This preloading technique can be used for any photo album or gallery where we can preload the
next or previous images of the current image so that the user does not have to wait much
when he see a slideshow or browse images using next/previous links. You can view such
album in Picasa by Google or at facebook. We can use Ajax with this to avoid the page loading in viewing photo albums.

2 Comments

JavaScript : Submit form conditionally

August 11, 2008 at 11:00 pm (Learning)
Tags:

Javascript lets you submit a single form, conditionally, to different script. Here, we’ll learn how to achieve this. First, let us go through a simple form:
<form method=”post” name=”frm1″ onSubmit=”javascript: decide_action();” action=”">
<input type=”radio” name=”ch” value=”one” /> Choice 1<br />
<input type=”radio” name=”ch” value=”two” /> Choice 2<br />
<input type=”radio” name=”ch” value=”three” /> Choice 3<br />
<input type=”submit” name=”s1″ value=”Submit” />
</form>
As you can see, this form displays three radio buttons. The objective is, send the form to a script according to the radio button selected. Since some Javascript action needs to take place once the Submit button is clicked, we invoke decide_action() function through the onSubmit attribute of the <form> tag. Although we include the action attribute, it is left blank. The other form fields are the usual ones. Now let us dive into the cryptic world of the actual script that steers the submission.
<script language=”javascript”>
function decide_action(){
if(check_buttons()==true){
if(document.frm1.ch[0].checked==true){
document.frm1.action=”one.php”;
}else if(document.frm1.ch[1].checked==true){
document.frm1.action=”two.php”;
}else{
document.frm1.action=”three.php”;
}
document.frm1.submit();
}
}

function check_buttons(){
var ok=false;
for(i=0; i<3; i++){
if(document.frm1.ch[i].checked==true){
ok=true;
}
}
if(ok==false){
alert(“Select at least one option.”);
}
return ok;
}
</script>

1 Comment