[jQuery] Load image even if others are loading
Hi All,
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();
}
Thanks
John