
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.
No comments:
Post a Comment