How to "jump the queue"...delay due to many thumbnail images

[Gary Hasler]

I have a pictures page with a LOT of thumbnails which take a while to
load. The problem is the picture viewer will not display or swap the
big picture until all the thumbs have loaded. I assume there is some
sort of event queue, and the big picture swap has to wait for the page
load to finish. What can I do about this?

Here is the current implementation, which uses "Colorbox", a jQuery
based "lightbox" clone. However the delay problem existed when I had
other simpler viewers:
http://www.thelogconnection.com/inprogress_project.php?project=Jones&page=pix

I have experimented with using blank thumbnails in the html and then
swapping in the real thumbs using JS triggered by the body.onload()
event, which has some promise but doesn't seem to work in IE7 for some
reason:
http://www.thelogconnection.com/inprogress_projectB.php?project=Barnhart&page=pix

 

[Richard Cornford]

I have a pictures page with a LOT of thumbnails which take a
while to load. The problem is the picture viewer will not
display or swap the big picture until all the thumbs have loaded.

<snip>

An observation: the thumbnails displayed appear to be being displayed
at half the pixels dimensions (60 by 45 pixels) of the image files
being loaded (120 by 90 pixels). That means that they define four
times as many pixels as you are using, which means you are downloading
more data than is needed, and then asking the browser to work to scale
the images down. There has got to be a saving available in modifying
the images so that they are no more than what you appear to want to
use (i.e. make the images the same size as they are going to be
displayed).

Richard.

 

[Jorge]

I have a pictures page with a LOT of thumbnails which take a while to
load.  The problem is the picture viewer will not display or swap the
big picture until all the thumbs have loaded.  I assume there is some
sort of event queue, and the big picture swap has to wait for the page
load to finish.  What can I do about this?

Here is the current implementation, which uses "Colorbox", a jQuery
based "lightbox" clone.  However the delay problem existed when I had
other simpler viewers:http://www.thelogconnection.com/inprogress_project.php?project=Jones&...

I have experimented with using blank thumbnails in the html and then
swapping in the real thumbs using JS triggered by the body.onload()
event, which has some promise but doesn't seem to work in IE7 for some
reason:http://www.thelogconnection.com/inprogress_projectB.php?project=Barnh...

Hi,

Replace "LoadMoreThumbs" with this one:

function LoadMoreThumbs () {
if ( currentThumbNum < numPics ) {
currentThumbNum++;
var img= document.images['Thumb_' + currentThumbNum];
img.onload= img.onerror= function () {
img.onload= img.onerror= null;
setTimeout("LoadMoreThumbs()", 0);
};
img.src = thumbUrlArray[currentThumbNum];
}
}

And, "OnLoadFn" with:

function OnLoadFn ( ) {
ImageProtectInit();
LoadMoreThumbs ();
LoadMoreThumbs ();
}

With these changes, there won't ever be more than 2 thumbs queued to
download in parallel, and the "big picture" will get a chance to be
downloaded in-between the thumbs downloads. If the thumbs take too
long, you can increase the number of thumbs downloading in parallel by
adding more "LoadMoreThumbs();" lines in OnLoadFn, like this:

function OnLoadFn ( ) {
ImageProtectInit();
LoadMoreThumbs ();
LoadMoreThumbs ();
LoadMoreThumbs (); //3 in parallel
}

HTH,

 

[Gary Hasler]

I have a pictures page with a LOT of thumbnails which take a while to
load. The problem is the picture viewer will not display or swap the
big picture until all the thumbs have loaded. I assume there is some
sort of event queue, and the big picture swap has to wait for the page
load to finish. What can I do about this?

Here is the current implementation, which uses "Colorbox", a jQuery
based "lightbox" clone. However the delay problem existed when I had
other simpler viewers:http://www.thelogconnection.com/inprogress_project.php?project=Jones&...

I have experimented with using blank thumbnails in the html and then
swapping in the real thumbs using JS triggered by the body.onload()
event, which has some promise but doesn't seem to work in IE7 for some
reason:http://www.thelogconnection.com/inprogress_projectB.php?project=Barnh...

Hi,

Replace "LoadMoreThumbs" with this one:

function LoadMoreThumbs () {
if ( currentThumbNum < numPics ) {
currentThumbNum++;
var img= document.images['Thumb_' + currentThumbNum];
img.onload= img.onerror= function () {
img.onload= img.onerror= null;
setTimeout("LoadMoreThumbs()", 0);
};
img.src = thumbUrlArray[currentThumbNum];
}
}

And, "OnLoadFn" with:

function OnLoadFn ( ) {
ImageProtectInit();
LoadMoreThumbs ();
LoadMoreThumbs ();
}

With these changes, there won't ever be more than 2 thumbs queued to
download in parallel, and the "big picture" will get a chance to be
downloaded in-between the thumbs downloads. If the thumbs take too
long, you can increase the number of thumbs downloading in parallel by
adding more "LoadMoreThumbs();" lines in OnLoadFn, like this:

function OnLoadFn ( ) {
ImageProtectInit();
LoadMoreThumbs ();
LoadMoreThumbs ();
LoadMoreThumbs (); //3 in parallel
}

HTH,

Thanks, Jorge, I will look into it.
Some things I still don't understand: in the file
inprogress_projectB.php, I set up my LoadMoreThumbs to load 16 thumbs
and then call setTimeout to wait 200 ms before running itself again. If
before that timeout expires, the user clicks in the viewer to swap the
big picture, the function called by his click should be ahead of the
next LoadMoreThumbs in the queue, correct? This works in Firefox but
not IE7; in IE the viewer is hung until every last thumb swap is done.
Is it something in the way the Colorbox and/or jQuery functions work
that causes this?

 

[Gary Hasler]

<snip>

An observation: the thumbnails displayed appear to be being displayed
at half the pixels dimensions (60 by 45 pixels) of the image files
being loaded (120 by 90 pixels). That means that they define four
times as many pixels as you are using, which means you are downloading
more data than is needed, and then asking the browser to work to scale
the images down. There has got to be a saving available in modifying
the images so that they are no more than what you appear to want to
use (i.e. make the images the same size as they are going to be
displayed).

Richard.

Richard you are absolutely correct. In fact I had forgotten that until
recently we displayed the thumbnails much larger, and I just never got
around to resizing them all down (a big job as there are thousands and
thousands of the originals in different directories).

 

[Jorge]

Replace "LoadMoreThumbs" with this one:

function LoadMoreThumbs () {
  if ( currentThumbNum < numPics ) {
    currentThumbNum++;
    var img= document.images['Thumb_' + currentThumbNum];
    img.onload= img.onerror= function () {
      img.onload= img.onerror= null;
      setTimeout("LoadMoreThumbs()", 0);
    };
    img.src = thumbUrlArray[currentThumbNum];
  }
}

And, "OnLoadFn" with:

function OnLoadFn ( ) {
    ImageProtectInit();
    LoadMoreThumbs ();
    LoadMoreThumbs ();
}

With these changes, there won't ever be more than 2 thumbs queued to
download in parallel, and the "big picture" will get a chance to be
downloaded in-between the thumbs downloads. If the thumbs take too
long, you can increase the number of thumbs downloading in parallel by
adding more "LoadMoreThumbs();" lines in OnLoadFn, like this:

function OnLoadFn ( ) {
    ImageProtectInit();
    LoadMoreThumbs ();
    LoadMoreThumbs ();
    LoadMoreThumbs ();  //3 in parallel
}

HTH,

Thanks, Jorge, I will look into it.
Some things I still don't understand: in the file
inprogress_projectB.php, I set up my LoadMoreThumbs to load 16 thumbs
and then call setTimeout to wait 200 ms before running itself again.  If
before that timeout expires, the user clicks in the viewer to swap the
big picture, the function called by his click should be ahead of the
next LoadMoreThumbs in the queue, correct?  This works in Firefox but
not IE7; in IE the viewer is hung until every last thumb swap is done.
Is it something in the way the Colorbox and/or jQuery functions work
that causes this?

I'm not sure, I've never used jQuery nor ColorBox, but we'll know as
soon as you test it with my code... (fingers crossed). Good luck!

Ciao,

 

[Jorge]

(...)
Some things I still don't understand: in the file
inprogress_projectB.php, I set up my LoadMoreThumbs to load 16 thumbs
and then call setTimeout to wait 200 ms before running itself again.  If
before that timeout expires, the user clicks in the viewer to swap the
big picture, the function called by his click should be ahead of the
next LoadMoreThumbs in the queue, correct? (...)

Yes, but still, the big picture would be #17 in the queue. And, as
200ms is just 1/5 of a second, it is very likely that by the time the
user clicks on a thumb, a big # of thumbs are already in the queue,
because you're enqueueing 16 thumbs more every 0.2 seconds.

 

[Richard Cornford]

Richard you are absolutely correct. In fact I had forgotten
that until recently we displayed the thumbnails much larger,
and I just never got around to resizing them all down (a big
job as there are thousands and thousands of the originals in
different directories).

Applying the same transformations to large numbers of images is
exactly the sort of thing that the automation facilities in Photoshop
are there for (by which I man the simple automation, not going as far
as scripting the application).

But I would recommend trying some different formats for the final
images as there seems to be a limit on how small JPG images can get
that isn't actually that small. A quick test yesterday suggested that
a 64 color GIF at half the image size would better then half the file
size for no significant loss of detail. PNG may be even better.

Richard.

 

[Gary Hasler]

Yes, but still, the big picture would be #17 in the queue. And, as
200ms is just 1/5 of a second, it is very likely that by the time the
user clicks on a thumb, a big # of thumbs are already in the queue,
because you're enqueueing 16 thumbs more every 0.2 seconds.

Well, your suggestion works like a charm! I guess where I went wrong
was assuming that setTimeout gets called only AFTER the images that were
requested have started downloading?? So actually, the execution of the
javascript continues as soon as the request for the image has been added
to the queue?...that makes sense.

But if that is true, why does my method work in Firefox? We may never
know...

 

[Jorge]

Well, your suggestion works like a charm!

I'm glad to know. Try with a few more d/l in parallel. Most browsers
nowadays can handle at least 4.

I guess where I went wrong
was assuming that setTimeout gets called only AFTER the images that were
requested have started downloading??  So actually, the execution of the
javascript continues as soon as the request for the image has been added
to the queue?...that makes sense.

But if that is true, why does my method work in Firefox?  We may never
know...

Because the queue is not handled in FIFO order, Safari handles it
randomly, FF might handle it backwards (LIFO)... ¿?

 

[Thomas 'PointedEars' Lahn]

Applying the same transformations to large numbers of images is
exactly the sort of thing that the automation facilities in Photoshop
are there for (by which I man the simple automation, not going as far
as scripting the application).

This can be done on request as well, for free.

man GDlib, ImageMagick, Netpbm


PointedEars

 

[Thomas 'PointedEars' Lahn]

Or with IrfanView, my favorite (free) image viewer:
http://www.irfanview.com/

No money or scripting involved. And he (Irfan) is a compatriot of mine,

Interesting, from your name I would have expected you to be of German
descent instead.

which is rare enough in the IT landscape, so I feel compelled to plug
his fine program in this fine group =)

</ot>

While IrfanView is free, it is not free software, and it is limited to
Windows; The GIMP or ImageMagick score over it in both respects.
Regardless, the point I was trying to make here was that it is not
necessary to use a graphics program to manually scale each of the images
down, and then upload the result to one's Web space.


PointedEars

 

[Thomas 'PointedEars' Lahn]

Wasn't that the point I was trying to make (that there is no need to do
it manually)?

AIUI, your suggestion for automation differs from the one that I suggested:
yours requires the images to be scaled down locally (using Photoshop, or
another graphics program), and then both the original and the scaled-down
versions to be uploaded.

My suggestion only requires the original images to be uploaded; the
*server-side* application will then scale them down for display if and when
and how it is needed. (This is the recommended approach for an image
gallery on a Web site.)


PointedEars