John, the problem is probably that browsers will normally do only two (or
some small number of) simultaneous downloads per domain. When you append the
HTML for all your thumbnails and then later ask for a full image, it gets
queued up behind all those thumbnail downloads.
Is there any way you could load the full image from a different domain than
the thumbnails? That is probably the easiest way to fix this. If the
thumbnails are loaded from thumbnails.example.com and the image is loaded
from images.example.com, then the full image download should start right
away when your visitor asks for it.
If you can't do that, give a shout back and we can brainstorm other
solutions.
-Mike
> From: johnwards
>
> Right I'm busy getting to grips with jquery and I have a little issue.
>
> I have 200 thumbnails which are loaded in on a page. I just
> loop through a json array of the thumbs and create each image
> elelment.
> Each element is hidden until the image is loaded where an
> onload request is sent to show the image.
>
> The problem I have is that I wish the user to be able to
> click an image even if the others are still loading in to
> show it in a div below.
>
> So when a user clicks the thumbnail that executes a bit of
> code that resets the holding images src attr with the requested image.
>
> This image however is not loaded in until all the thumbnails
> have finished loading in.
>
> I suppose an iframe may be the answer but I really don't wish
> to use an iframe if possible.
>
> Some copy and pasted code:
>
> This builds the thumbnails
> function initShow(imagedata){
> var showarea = $('#sliderwidth');
> var count=1;
> var startwidth=69;
> var holdstr = '';
> var firstid =0;
> var thisid = 0;
> showarea.empty();
> for(imageid in imagedata){
> var thumbnail = '';
> if(firstid==0){
> firstid = imageid;
> if(curid==0) {
> updateImage(firstid);
> }
> }
> if(imagedata[imageid].thumbnail)
> thumbnail =
> "http://"+imagedata[imageid].url+imagedata[imageid].thumbnail;
> else thumbnail="http://"+imagedata[imageid].url
> +imagedata[imageid].thumbnail_org;
> if(count==1){
> holdstr='<div
> class="slideshowimageshold">';
> }
> holdstr=holdstr+'<div
> id="loader'+imageid+'" class="thumbloader"></
> div><a href="#1" onclick="updateImage('+imageid+')"><img
> class="slideshowimages" src="'+thumbnail+'" alt="image"
> style="display:none;" onload="showThumb('+imageid+')"
> id="thumb'+imageid+'"/></a>';
> if(count==2){
> holdstr=holdstr+'</div>';
> showarea.append(holdstr);
> count=1;
> showarea.css("width",startwidth);
> startwidth = startwidth+69;
> }else{
> count=2;
> }
> }
> if(count==2){
> holdstr=holdstr+'</div>';
> showarea.append(holdstr);
> count=1;
> showarea.css("width",startwidth);
> }
> }
>
> This is updateImage which is called on click and on first load
>
> function updateImage(imageid){
> if(curlocationid==1){
> var imagelist = lon_imagelist;
> }else if(curlocationid==2){
> var imagelist = edin_imagelist;
> }else if(curlocationid==3){
> var imagelist = other_imagelist;
> }
> drawImage(imagelist[imageid]);
> }
>
> This is drawImage
>
> function drawImage(imagedata){
> $('#imageloader').show();
> $('#imageholder-inner').hide();
> $('#imageholder-inner').empty();
> $('#imageholder-inner').append('<img
> style="display:none;"
> onload="showPic()" src="http://'+imagedata.url+imagedata.showimage+'"
> id="showimage" />');
> $('#artistinfo').empty();
> $('#artistinfo').append(imagedata.caption);
> curid = parseInt(imagedata.imageid);
> }
>
> This is showPic
>
> function showPic(){
> $('#imageloader').hide();
> $('#showimage').show();
> $('#imageholder-inner').fadeIn('normal');
> }
>
> this is showthumb
>
> function showThumb(imageid){
> $('#loader'+imageid).hide();
> $('#thumb'+imageid).show();
> }
