Using CSS to Preload Images Without JavaScriptPosted 2011-08-14 in Webmaster![]() Preloading images on your website can help eliminate flicker and laggy hover effects on your images. For a long time Web designers have used JavaScript to preload images. This has the benefit of loading images into the browser cache in the background, but it also relies on JavaScript support in the browser and several lines of extra JS code. (Or worse, the onload() property in some awkward implementations!) The JavaScript Image Preloading CodeThe code for JS image preloading typically looks like this: image1 = new Image(); image1.src = "imagefile1.jpg"; image2 = new Image(); image2.src = "imagefile2.jpg"; This code uses JavaScript to preload the images, but requires a few lines of code for each image as you can see. So, how do we do away with JavaScript for our preloader code? CSS to the rescue! The CSS Image Preloading CodeThe CSS method lets us implement a preloader without any JavaScript code at all. The first step is to create a class that uses the .imagepreload { display: none; } Now we can add the HTML needed for each image to preload. Insert the code anywhere in your BODY tags. <div class="imagepreload"> <img src="imagefile1.jpg" width="1px" height="1px" alt="Preload Image 1" /> <img src="imagefile2.jpg" width="1px" height="1px" alt="Preload Image 2" /> </div> Now the browser will load these images when the page loads, but our CSS properties will keep our explicit image tags from being displayed! This is just one way of preloading images on your website, but it does present some advantages over the JavaScript counterpart. There are also ways of using CSS to preload images using background images. Any suggestions or tricks of your own are welcome. |
SearchPopular Articles
SubscribeSubscribe via RSS Stay current with Scriptalicious news and subscribe in your favorite RSS reader. Subscribe via EmailGet the latest Scriptalicious news delivered to your inbox. Tag Cloudseo guides seo scripts scriptalicious seo tools forums PageRank SEO services content development apache htaccess mod_rewrite scripts webmaster google yahoo JavaScript XMLHttpRequest php contest software website list facebook ebook pagerank bing backlink rankings tool turnkey checker alexa themes coupon marketing tinymce wysiwyg browser rank script tools legal trademark infringement mysql social web social networking advertising ppc google plus plus one backlinks update keyword guide pagerank script graphics images |
![]() 77 powerful SEO scripts for under $100. |
![]() Real-time Backlink Rank Checker script. |