The easiest way of image preloading

Image preloading is the most important way to make faster website. We looks for the better way but unable to decide which will be best and easy to implement. Images always play important role for good website and people prefer to get an overview about the topic from the used images and for that we have to use informative and good quality images which may make our site slower. So what do you think? will we skip using images? No, there are extremely easiest and useful way which will help to make your site smooth and faster.

Lets implement the image preloader using following javaScript lines in your master page, it will not take more than 5 minutes.

Preloading with JavaScript

<div class="hidden">
 <script type="text/javascript">
   if (document.images) {
    img1 = new Image();
    img2 = new Image();
    img3 = new Image();
    img4 = new Image();
    img5 = new Image();

    img1.src = "http://yourdomain.com/imagefolder/imagename-01.jpg";
    img2.src = "http://yourdomain.com/imagefolder/imagename-02.jpg";
    img3.src = "http://yourdomain.com/imagefolder/imagename-03.jpg";
    img4.src = "http://yourdomain.com/imagefolder/imagename-04.jpg";
    img5.src = "http://yourdomain.com/imagefolder/imagename-05.jpg";
   }

 </script>
</div>

Just you have to change the image path as per your needs, that's it. Browser will cache the images during page rendering and hope you can understand that you can preload any number of images.

I always will recommend to use the above one, however here is another way from CSS2 which you may like to use.

Preloading with CSS:

body:after
{
content: url(24xhtml.jpg) url(24xhtml-design.jpg) url(24xhtml-css.jpg) url(24xhtml-blog.jpg) url(24xhtml-earn-money.jpg);
display: none;
}

You can see the display none property using in the body:after tag which will hide the preloaded images from content and will show once you call it from the page.

• How to create your first blog for free?
• How to use custom domain for your blog and why?
• How to apply for Google AdSense?

- For new articles/ information please subscribe or join -
twitter facebook google+