Displaying lowsrc image while page is loading

Forum Moderators: open

Message Too Old, No Replies

Displaying lowsrc image while page is loading

Forse

1:47 pm on Oct 8, 2004 (gmt 0)

It's not as easy as it sounds. I have a wallpaper site and I preload a small image (low quality ~1kb) and I would like it to display on all thumbnails while page is loading and then show real thumbs. I could do that no problem with javascript and css...but my pages are dymanicly created and I would need some way to replace ALL srcs of images with id=thumb and then swap them back to iriginal src after page has loaded.

I know it would require javascript so I am posting it here.

Thank you a lot in advance.

P.S. I don't code in js so I don't know how this can be done.

adni18

10:52 pm on Oct 14, 2004 (gmt 0)

First of all, welcome to WebmasterWorld!

Here's the script:

<BODY onLoad="imgs()">
<SCRIPT LANGUAGE="JAVASCRIPT">
function imgs() {
arr=document.getElementsByTagName("img");
for(var i=0;i<arr.length;i++)
{
if(arr[i].id=="thumb")
{
arr[i].src=arr[i].src.split("_")[2];
}
}
}
</SCRIPT>
<img src="low_res_wallpaper1.jpg" id="thumb">

P.S. Good luck with the wallpapers. I own my own wallpaper site.

Forse

11:34 pm on Oct 14, 2004 (gmt 0)

Thanks a lot man! I have a small sections of anime wallpapers so it's not like a big site. Anyway thnx again, I will try to adopt it to my site.