Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to "jump the queue"...delay due to many thumbnail images

Reply
Thread Tools

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

 
 
Gary Hasler
Guest
Posts: n/a
 
      02-15-2010
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/inpr...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/inpr...nhart&page=pix
 
Reply With Quote
 
 
 
 
Richard Cornford
Guest
Posts: n/a
 
      02-17-2010
On Feb 15, 5:19 pm, Gary Hasler wrote:
> 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.
 
Reply With Quote
 
 
 
 
Jorge
Guest
Posts: n/a
 
      02-17-2010
On Feb 15, 6:19*pm, Gary Hasler <(E-Mail Removed)>
wrote:
> 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/inpr...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/inpr...?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,
--
Jorge.
 
Reply With Quote
 
Gary Hasler
Guest
Posts: n/a
 
      02-17-2010
Jorge wrote:
> On Feb 15, 6:19 pm, Gary Hasler <(E-Mail Removed)>
> wrote:
>> 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/inpr...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/inpr...?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,
> --
> Jorge.


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?
 
Reply With Quote
 
Gary Hasler
Guest
Posts: n/a
 
      02-17-2010
Richard Cornford wrote:
> On Feb 15, 5:19 pm, Gary Hasler wrote:
>> 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.

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).
 
Reply With Quote
 
Jorge
Guest
Posts: n/a
 
      02-18-2010
On Feb 18, 12:35*am, Gary Hasler <(E-Mail Removed)>
wrote:
> Jorge wrote:
> > On Feb 15, 6:19 pm, Gary Hasler <(E-Mail Removed)>
> > wrote:
> >> 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/inpr...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/inpr...?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,
> > --
> > Jorge.

>
> 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.
 
Reply With Quote
 
Jorge
Guest
Posts: n/a
 
      02-18-2010
On Feb 18, 12:35*am, Gary Hasler <(E-Mail Removed)>
wrote:
> (...)
> 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.
--
Jorge.
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      02-18-2010
On Feb 17, 11:39 pm, Gary Hasler wrote:
> Richard Cornford wrote:
>> On Feb 15, 5:19 pm, Gary Hasler wrote:
>>> 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, ...

<snip>
>
> 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.
 
Reply With Quote
 
Gary Hasler
Guest
Posts: n/a
 
      02-18-2010
Jorge wrote:
> On Feb 18, 12:35 am, Gary Hasler <(E-Mail Removed)>
> wrote:
>> (...)
>> 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.


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...
 
Reply With Quote
 
Jorge
Guest
Posts: n/a
 
      02-18-2010
On Feb 18, 5:45*pm, Gary Hasler <(E-Mail Removed)>
wrote:
>
> 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)... ?
--
Jorge.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
How to due with "warning LNK4075: ignoring '/INCREMENTAL' due to Fresh C++ 2 04-22-2008 09:03 PM
Creating Thumbnail Images on the fly cantbprince Java 3 04-11-2006 06:53 PM
Displaying a Thumbnail vs. creating a thumbnail David Lozzi ASP .Net 1 02-01-2006 10:34 PM
Show light weight thumbnail of large images moondaddy ASP .Net 4 06-29-2004 03:39 PM



Advertisments