How to Create an Image Pre-loader Without Javascript?

In this article, you’ll learn how to create an image pre-loader without Javascript. CSS is the technique we are going to use. No fancy and hard to understand codes, but the smart use of codes you already know about.

Why use an image pre-loader? A lot of websites out there use CSS to display their navigation menu. In most of these menu’s, images are used. When you roll with your mouse over one of the menu items, the ‘hover’ image is displayed.

Sometimes, it takes a fraction of a second to load this ‘hover’ image. Your browser doesn’t load ‘hover’ images when the whole page loads, and therefore it has to load when the visitor asks for it. As the designer of that page you would like to display that ‘hover’ image right away. This is where the pre-loader comes in, which is an smart help in such situation.

Let’s start. In this article we’ll make sure ‘hover’ images are loaded together with the page. These are the codes we will start with.

CSS

ul{
margin: 0;
padding: 0;
list-style-type: none;
font: 13px Lucida Grande, Arial, sans-serif;
}
ul li{
display: inline;
}
ul li a{
display:block;
width:120px;
text-decoration: none;
padding: 0.3em 1em;
color: #000;
background:url(images/link.gif);
}
ul li a:hover{
width:120px;
background:url(images/hover.gif);
}

My HTML codes looks like this:

We are going to add a pre-loader. Open up your HTML file and add the following codes just above your tag.

Inside this div, we are going to add images you would like to pre-load. Those images won’t be displayed when the webpage just loads, only when rolling over the menu item.

Now, open up your CSS file. Add the following codes:

div.loader{
background:url(images/hover.gif);
margin-left:-1000px;
}

These codes will tell the div with class loader it should be displayed 1000px to the left. Yes, outside your browser. Your visitors won’t notice this box, but your browser knows the box is there and will load the image(s).

If you would like to add more images to the div, just add more ‘background’ tags and you are done.

div.loader{
background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
background:url(images/hover4.gif) no-repeat;
margin-left:-1000px;
}

Now you could pre-load images without using Javascript! Good luck with using this on your website and thanks for reading.

How to Improve Your Website Usability?

Web page usability is a vital criteria in any web design project as it is this factor that can get repeat visitors to a website. Improving usability of web pages may not be an easy job even for the most skilled web designers. Usability based web designing is all about habit formation, it cant be achieved in one day. The designers need to gradually evolve themselves into designing websites high on usability. The following are some tips that can help web designers to improve website usability:

  1. Improve your page load speed. A slowly loading web page can only irritate the visitors. A website can be made to load faster through efficient coding, like use of CSS and optimal use of multimedia content.
  2. Make your web design simple and conventional so that people wouldn’t need to spend time learning how to use your website. Don’t add flash intros about your company, this only tells the visitor that you don’t care about their time and that you are more interested in singing your own praises.
  3. Don’t go for too many unnecessary features, widgets, flash content, video, images etc. This can only slow up your website. Instead, use only elements that cannot be missed. You can add vital elements like those needed to get customer information like their email for example. This doesn’t mean you have to make them fill huge forms.
  4. Keep your website open for user comments regarding your web site’s usability. Note down these comments and make the necessary improvements.
  5. Avoid using irritating gifs, unnecessary background audio, pop ups, scrolling messages etc.
  6. Compress your images to make them load faster, you can use image optimizers to do this.
  7. Keep web page length to a minimum. Instead of going for one huge web page, you can have several smaller webpages that are more readable and easier to navigate. This can also help avoiding unnecessary use of the dreaded scrollbar.
  8. Always include a Site Map. A site map is a diagrammatic representation of the architecture of the website. A site map is not only a good way to improve the navigation in the website but also your ranking in search engines.
  9. Always go for contrasting Colors that can make your text more readable. Whenever you are using a dark background you need to use bright colored text. Also see that the text is big enough to be easily read.
  10. Provide relevant content that can be useful to the user. Adding too many advertisements and content that is not useful can drive the visitor away.

Finally, you need to do a complete usability test of your website before hosting it online. Check whether your website loads on all the popular browsers, check whether it can address the disabled visitors lie blind people. See that all links are working properly, check spelling mistakes, Load speed etc. And don’t forget to Validate your code. All these steps can improve the usability of your website and improve its popularity in a big way.