Image load order

learning_brain

learning_brain

New Member
Messages
206
Reaction score
1
Points
0
My Image Search Engine is now working very nicely and provides lots of high quality images....

Thats the problem.....

Each image was taking ages to load, so I created a dynamic thumbnail navigator with a large preview (original image) on hover (put in a span). This works pretty well, but the thumbs do not necessarily load first, and if you look at it, some of the large images in the background are already loading and taking a heavy toll before all thumbs have shown.

After LOTS of googlereads I am coming to the conclusion that the JS onload is the only way to give any control, but does anyone else have any other ideas. (javascript not being a preferred solution in a pretty much javascript-free site).

My other solution is to have the "large" preview as a GD created image as well, but this will seriously eat into my space.
 
S

sikuneh

New Member
Messages
55
Reaction score
0
Points
0
You could go with the jQuery lightbox plugin. It lets you set up as many thumbnails as you want and it creates a new image on a larger scale of the clicked thumbnail. That is a good solution.

jQuery lightbox: Here
 
lemon-tree

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
Points
48
I think the only way to do this would be through Javascript onload. Have it setup so that PHP populates a javascript array containing the URLs of every big image and when the onload triggers create the image items dynamically that'll then start the download of the bigger items.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
You could try restructuring your document so the thumbnails come first in the source, or try placing <img> elements referring to the images you want to load first in a hidden element that's the first child of <body>.

HTML: 
<body>
  <div style="visibility:hidden"><img src="…" />...</div>
  ...

There's no standard that specifies the order that images (or any replaced element) are loaded in, so the above may not work the same (or at all) on all browsers.
 
Last edited:
You must log in or register to reply here.
Top