• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

How To Preload Images In JavaScript

April 15, 2014 //  by Manisha//  Leave a Comment

Usually high resolution images can really slow down the website. images are loaded only after an HTTP request is sent for them, either passively via an <img> tag or actively through a method call. Preloading images comes to our rescue which means loading an image into cache before being used. The simplest way to preload an image is to instantiate a new Image() object in JavaScript and pass it the URL of the image you want preloaded.

The following example demonstrates the preloading of images:

JavaScript Preload Images Example

<!DOCTYPE html>
<head>
<TITLE>Example- preloading of images</TITLE>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "image.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
     <a href="#" onMouseOver="javascript:document.image.src='image.jpg'">
     <img name="img01" src="image.jpg"></a>
</body>
</html>

Note that the image tag does not itself handle onMouseOver() and onMouseOut() events. Hence <img> tag in the example above has been enclosed in an <a> tag, which does include support for those event types.

Preload Images In JavaScript Demo

  • Save the file as preloading.html in your system.
  • Just open the file in the browser, you will notice how the image gets loaded fast.

Category: JavaScriptTag: JavaScript Tutorials

Previous Post: « JavaScript History Object
Next Post: PrimeFaces AutoComplete + AjaxBehavior Example »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact