As you can see, I put some banner from Google Adsense in this blog. I always hate to wait until all the banners are displayed, so I wrote a short CSS code to give the banner a simple animation before the advertisement is fully loaded. It’s very easy to do such trick because Google Adsense (and other ads script, so far I know) using iframe to display their advertisements. So here we go the CSS script:

iframe{
background-image:url(img/wung.gif);
background-repeat:no-repeat;
background-position:50% 50%;
}


Simply change background-image:url(img/wung.gif); with any image you have. It will be nice to use a small but cool preloader image. Then set the background-position as you wish. My script above, will put the image on the center. Next-time, you will see the “loading” image before your ads are fully displayed, like following sample:

Sorry, only Firefox users can see the spinning image. I tried using IE and Opera but failed. I think there must be a little hack we can do to make the loading/spinning image displayed on other browsers.

I hope you like this little idea ^_^