Often you need to preload images for a specific ‘on-event’ action such as a mouse-over. Rather than waiting for the image to be downloaded once the cursor is placed on the mouse-over button you can preload the image to carry out the effect smoothly. An example of preloaded image is the hover effect on the menu on the top of this page. The hover images of the menu buttons will be preloaded with the page so that when you place your mouse over it, it is already in the cache. Now, I will share 3 ways to preload images and the logic behind each.

Preloading the Javascript way

This is what you paste in the javascript for preloading:

<SCRIPT language="JavaScript">
<!--
if (document.images)
{
preload_image_object = new Image();
image_url = new Array();
image_url[0] = “http://www.demo.net/folder/image0.gif”;
image_url[1] = “http://www.demo.net/folder/image0.png”;
image_url[2] = “http://www.demo.net/folder/image0.jpg”;
image_url[3] = “http://www.demo.net/folder/image0.png”;
var i = 0;
for(i=0; i<=3; i++)
preload_image_object.src = image_url[i];
}
//–>
</SCRIPT>

You can add as much images as you want by adding to the array but also remember to increase the loop accordingly. This preload was generally the first way to preload images and is still being used widely, but somehow with time this has become very ineffective although it is not completely discouraged to use it.

Preloading the Classical Way

The reason why I’m calling it classical is because it involves simple HTML and just a little bit of CSS, first you add this to your stylesheet:

#preload-img { display:none }


Then you add this to somewhere near the bottom of your page:

<div id="preload-img">
<img src="http://www.demo.com/images/hover.jpg" height="1" width="1"/>
<img src="http://www.demo.com/images/hover2.png" height="1" width="1"/>
</div>

I would recommend this way because this is the one that I am using on my blog. You can check it’s functionality by moving your cursor over the menu at the top and see that it works smoothly. It is simply because you are loading the image directly on the page through HTML and then hiding it with your smartness when you make it almost invisible using CSS and the height and width attributes of the image. Your page would never completely load without these images because they are a part of it. In the example code above there are only 2 images, however you can add more and change their image sources accordingly.

Using jQuery Script to preload images

I usually do not recommend my readers to try something which I have not tried myself, but because I’m covering the topic, it would be incomplete if I didn’t tell you about this technique. To be brief, the jQuery Script preloads all images which are located in your CSS stylesheet, which can save a lot of time. I’m not using it on any of my sites, so I’ll just give you a link to the place where I learned about this technique. It has the full source code and instructions to help your preload images. Here it is:

• A New & Improved jQuery Script to Automatically Preload images from CSS

Preloading is a great technique, in fact one of those which you learn when you start coding a full website yourself and learn new designing skills. Have fun playing around with preloading images.

Back in this blog’s early days, it got about 20 hits which were regarded by Google Analytics as ‘Direct Traffic’. So far, the most difficult traffic type to increase is the direct traffic but as mentioned in the previous article, it is the most reliable and dependable. Direct traffic shows sure interest into the blog, there is usually no such time as ‘no luck with social media/SERPS’.

I spent time in this, and have been successful to an extent where I feel I can tell others how I manage to get at least 80 hits a day as Direct traffic by now. It might seem a little complicated and it takes time as well.

1. Make your blog brandable, get a custom design, buy a domain, build an impression. Do whatever it takes to make your blog different from the other blogs that your readers reads. This will probably have him coming back for more.
2. Choose a good domain, since direct traffic is usually the traffic where visitors arrive by directly entering the URL of the blog, so let it be easy and rememberable.
3. Encourage readers to bookmark your blog, at least a person like me who goes through his bookmarks every now and then will be sure to drop by.
4. Make sure your blog is updated at least once a week, who’s like to see the same thing for a whole month?
5. Tell others about your website, online and offline. This is so effective that you’ll never realize it when you see a spike in your direct traffic.

Like a pile of dirty clothes, direct traffic is cumulative and is more likely to increase than to decrease unless you change your blogging ways. Moreover, point number 5 is pretty common and may have certain viral effects. For example: You tell A, A tells B and C, they tell others and so on. Implement these 5 things and hopefully your blog will pick up direct traffic in the long run.

To begin with, there are basically three sources of traffic to most websites, which are Direct Traffic, Referred Traffic and Search Engine Traffic. Whenever I am asked the question “How can I build consistent reliable traffic?”, What I’ll discuss in detail is something I usually briefly tell my readers. Before knowing how to build traffic which is targeted and good for your website, you need to know where to start and set your priorities. First, you’ll have to be familiar with each type of traffic:

Direct Traffic

This is the traffic which you’ll get from people who either remember your website’s URL, visit it regularly or have bookmarked it. This is the most reliable source of traffic and builds up constantly with the blog’s reach. An ideal percentage of your total traffic should be somewhere near 30-35%.

Search Engines

Unlike direct traffic, as the name suggests, most traffic will be from search engines, namely: Google, Yahoo, Windows Live Search. Search engine users who arrive on your website will not normally be interested in your site but rather a small part of your content which matches their search. Bounce rates are always more than 80% and you have very less chances of expecting them to return, so the ideal share of search engine traffic should be somewhere near 25-35%.

Referring Sites

Most websites tend to receive traffic from this source which is very general as it can be further classified as follows:

• Social Media
• Social Networks
• Other Networks
• Websites
• Blogs

Although this list continues but I’ve listed the most common ones. Referring sites usually give traffic which does not last very long. Normally good traffic ranges from 2-3 days especially on Social Media and Social Networks. Some networks bring recurring traffic which is dependent on some other factor such as your contribution or activity while others might bring a few traffic spikes to your overall graph. This should normally range from 25-30%.

The advantage to bring diversified traffic to your blog is that your blog’s traffic never falls weak whether there are no people interested in your site directly or others stop using keywords related to your blog. You wouldn’t want to rely 90% on Social Media which brings you about 300 Visitors a day, as time goes by, the traffic fades out and you’re left with less than 50 visitors a day, which is pathetic. So always set your traffic priorities accordingly to obtain good results from your traffic in the long run.