Preloading Images
Posted: Sun Jan 23, 2005 12:06 pm
I've got a little script I whipped up so my wife can easily share pictures with her family. What it does it when run, scans a directory for thumbnails and another for pictures and creates thumbnails where needed and also deletes uneeded ones. So all she has to do is add and remove pictures from the one directory. It also resizes pictures if they are huge so she can just take pictures straight from the camera and put them in there and they won't be humungous. Pretty snazzy. I tell her always to view the page after she makes changes so only she has to wait through the long load time when there were a lot of changes. Now the problem is in the way the pictures are displayed. you can see some of them at http://ourwedding.no-ip.org/snowpics/ or http://ourwedding.no-ip.org/snowpics/ . I display the thumbnails and use javascript to update the main picture. The javascript resizes an img tag to the image size and sticks it in there. I'm hosting it through a cable connection which has limited upload speed. The problem is is that the img always gets resized and then there is a long wait for the picture to come, during which you are looking at a funnily stretched picture. (you can see this if you look at a normal picture and then a panaramic. My mom thought this was a great feature and laughed at seeing people all wide or narrow, but I am trying to fix it. I figured the first step would be to preload the pictures using javascript, but when I put them in script tags in the head, it makes the page take forever. So I put them at the end of the page, although I'm not really sure if that works right. The other thing I want to do and have no idea how to is to make the javascript wait until the picture is loaded before resizing. or at least set it to blank until its done. Any ideas?