Image pre-loading is almost an essential task in dynamic website. Its specially needed for Ajax powered website. Suppose, you want to show a loading image while getting contents from server after user clicks any button/link. In this case, if the image is not preloaded, the loading image and server result may come at same time. So what is the benefit of showing the loading image if the user can’t see it while the content is loading?
One may preload images using javascript, which may not easy for novice developer. But I got an easy way. here is the way:
You list the required images to preload in a page. Then make a div and show all images in the div as below:
[code]
[/code]
you may add as many images as you need. Aha! You see all images are shown in the website as soon as they are loaded. But we will not show all now but show later. So here is the final code:
[code]
[/code]
now whole div and all its contents (the images) are hidden. but these images are loaded to browser cache. so whenever you call any images (listed above) it will be shown immediately after calling rather than waiting to load from server as this images are now in browser’s cache.
thanks
Bookmark:
No related posts.
I has some drawbacks unless
will wait cause, I may think some JS code is loading. If I click who knows the code will be corrupted. Like the “Arrghh …” dialog in gmail. If this phenomenon is seen most of the time while visiting the site, they might also think that the website never finishes loading.
I has some drawbacks unless I didn’t understand you totally/exactly.
The user tends to wait until the loading bar of browser stops. like what we see in opera at top and in FF/IE in the bottom. If this technique is used, The page will be loaded faster no doubt about that. But the user will be waiting, because of the progress bar of the browser. Most user wont click a single link. And some advanced users like me
[Reply]
where is the code
where is the code
[Reply]
i have edited the post as
i have edited the post as the div tags were stripped by input filters.
thanks
[Reply]