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

Discussion in 'Javascript' started by Gary Hasler, Feb 15, 2010.

  1. Gary Hasler

    Gary Hasler Guest

    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
     
    Gary Hasler, Feb 15, 2010
    #1
    1. Advertising

  2. 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 Cornford, Feb 17, 2010
    #2
    1. Advertising

  3. Gary Hasler

    Jorge Guest

    On Feb 15, 6: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.  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,
    --
    Jorge.
     
    Jorge, Feb 17, 2010
    #3
  4. Gary Hasler

    Gary Hasler Guest

    Jorge wrote:
    > On Feb 15, 6: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. 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,
    > --
    > 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?
     
    Gary Hasler, Feb 17, 2010
    #4
  5. Gary Hasler

    Gary Hasler Guest

    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).
     
    Gary Hasler, Feb 17, 2010
    #5
  6. Gary Hasler

    Jorge Guest

    On Feb 18, 12:35 am, Gary Hasler <>
    wrote:
    > Jorge wrote:
    > > On Feb 15, 6: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.  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,
    > > --
    > > 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.
     
    Jorge, Feb 18, 2010
    #6
  7. Gary Hasler

    Jorge Guest

    On Feb 18, 12:35 am, Gary Hasler <>
    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.
     
    Jorge, Feb 18, 2010
    #7
  8. 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.
     
    Richard Cornford, Feb 18, 2010
    #8
  9. Gary Hasler

    Gary Hasler Guest

    Jorge wrote:
    > On Feb 18, 12:35 am, Gary Hasler <>
    > 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...
     
    Gary Hasler, Feb 18, 2010
    #9
  10. Gary Hasler

    Jorge Guest

    On Feb 18, 5:45 pm, Gary Hasler <>
    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.
     
    Jorge, Feb 18, 2010
    #10
  11. Richard Cornford wrote:

    > On Feb 17, 11:39 pm, Gary Hasler wrote:
    >> Richard Cornford wrote:
    >>> 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).


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

    man GDlib, ImageMagick, Netpbm


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Feb 18, 2010
    #11
  12. Stefan Weiss wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> Richard Cornford wrote:
    >>> On Feb 17, 11:39 pm, Gary Hasler wrote:
    >>>> Richard Cornford wrote:
    >>>>> 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, ...
    >>>> 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).

    >>
    >> This can be done on request as well, for free.
    >>
    >> man GDlib, ImageMagick, Netpbm

    >
    > 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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Feb 19, 2010
    #12
  13. Richard Cornford wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> Stefan Weiss wrote:
    >>> Thomas 'PointedEars' Lahn wrote:
    >>>> Richard Cornford wrote:
    >>>>> 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
    >>>
    >>> Or with IrfanView, my favorite (free) image viewer:
    >>> http://www.irfanview.com/

    >>
    >> 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.

    >
    > 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
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Feb 19, 2010
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Lozzi
    Replies:
    1
    Views:
    506
    john smith
    Feb 1, 2006
  2. cosmic foo

    many images delay even when cached

    cosmic foo, Jul 26, 2005, in forum: HTML
    Replies:
    32
    Views:
    1,125
    Blinky the Shark
    Jul 29, 2005
  3. Fresh
    Replies:
    2
    Views:
    649
    Bo Persson
    Apr 22, 2008
  4. Chris Zopers

    Startup delay due to compiling

    Chris Zopers, Jun 23, 2008, in forum: ASP .Net
    Replies:
    4
    Views:
    276
  5. bernd
    Replies:
    10
    Views:
    2,281
    Gordon Beaton
    Aug 6, 2008
Loading...

Share This Page