More fun with Original
In the comments of a history(link?) on slashdot about google, somebody explained how gmail manages to change its contents without reloading its page.
The trick is to do http requests with JavaScript, using the XmlHttpRequest object.
That got me thinking about the possibility of speeding a little bit my photo album.
When you click a photo in one of my galleries, you end on a page with the selected photo centered, and with two thumbnails in the two sides of the photo, to navigate to the next/previous photos.
A typical behaviour would be to see one photo (and that takes a few seconds), and click on the “next” thumbnail to see the next photo. When you click, you are not anymore interested in the current photo, and you have to wait until the page with the next photo loads in your navigator. Surely enough, this time will be dominated by the time to load the next, big, central image (plus any fixed delay determinated by your ping).
My idea is to preload the next and previous images just after the page is loaded, that is, in the few seconds the user needs anyway to appreciate the current image. When the user will click on the next thumbnail (or the previous one), a little bit of javascript will change the central image by the next (previous) image, that has already been downloaded. This operation is very fast compared with the time that takes to download the image.
The end result is that the user can navigate to the next/previous photos without any appreciable delay (at least, if they really look at the central photo), making it a snappier experience.
Needless to say, that makes the code a bit trickier, and I had to remove some hardcoded (read calculated by php) widths and heights, and thatbreaks the havoc of FireFox (there was a remaining bug in my page, FireFox was just doing what I said him to do, not what I wanted him to do).
In the TODO list,fix some remaining javascript errors, remove the previous and next thumbnails if there is no previous or next thumbnail to show and make it play better with FireFox.
The trick is to do http requests with JavaScript, using the XmlHttpRequest object.
That got me thinking about the possibility of speeding a little bit my photo album.
When you click a photo in one of my galleries, you end on a page with the selected photo centered, and with two thumbnails in the two sides of the photo, to navigate to the next/previous photos.
A typical behaviour would be to see one photo (and that takes a few seconds), and click on the “next” thumbnail to see the next photo. When you click, you are not anymore interested in the current photo, and you have to wait until the page with the next photo loads in your navigator. Surely enough, this time will be dominated by the time to load the next, big, central image (plus any fixed delay determinated by your ping).
My idea is to preload the next and previous images just after the page is loaded, that is, in the few seconds the user needs anyway to appreciate the current image. When the user will click on the next thumbnail (or the previous one), a little bit of javascript will change the central image by the next (previous) image, that has already been downloaded. This operation is very fast compared with the time that takes to download the image.
The end result is that the user can navigate to the next/previous photos without any appreciable delay (at least, if they really look at the central photo), making it a snappier experience.
Needless to say, that makes the code a bit trickier, and I had to remove some hardcoded (read calculated by php) widths and heights, and that
In the TODO list,
0 Comments:
Post a Comment
<< Home