Preload images in HTML using JavaScript


Preloading means loading an object (graphics, text, movie) before showing it to output.

A good example is of  preloading in flash files, when you see a loader before displaying the content, and after loading site shows a smooth experience of flow of data.

This is mostly used when there is an mouser over images to be loaded. If user mouse overs an image and then you loads the new mouse-over image it may take a few seconds to load, which leads to a small blank image over the image area. By pre-loading the image you can show mouseover image instantly without any delay.

In this post I am explaining how to do preaload imags in HTML using JavaScript, without using flash.

We have to use the Head tag of html as this is the one which loads on first page executiution.

<head>
<script type=”text/JavaScript”>

if (document.images)
{
pic1= new Image(190,53);
pic1.src=”images/productSmall.gif”;

pic2= new Image(190,53);
pic2.src=”images/storeSmall.gif”;
}

</script>
</head>

The above code lods two images naming productSmall.gif and storeSmall.gif respictively from images directory. It creates a new object of image and assigns it a dimention and a file to load.

The document.imags condition has been used to determine that the browser supports the images or not.

Advertisements

About dotnetcoderoom

Working as an Onsite coordinator in USA. Handling UAT, CR (Change Requests), Product Support/Development, Build Management. Supervise and assist in live product implementation (at client side) and training. Providing technical direction for the development, design, and system integration. Closely monitoring and working with offshore team for Enhancements, Bug Fixing, Enforce coding standards, perform code reviews and mentors junior developers. Proven track of timely delivery of enterprise level web based applications. Skilled in a variety of software languages, tools, and methodologies, with a special expertise in Microsoft .NET technologies. MCTS .Net 4.0 Web applications MCTS .Net 2.0 Web applications GNIIT, MCA, B.Com Specialties 8+ Years of experience in .NET Technologies. Expertise in .NET, ASP.NET, MVC, C#, VB.NET, WCF, Web Services, MS SQL, JQuery. Excellent R&D and troubleshooting skills. Extensive knowledge in E-Commerce and Healthcare domain. View all posts by dotnetcoderoom

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: