...

View Full Version : Dynamically loading images



mpclubfoot
06-02-2005, 02:33 PM
Hello,

I have some code that takes an image url (and some info about the image) and creates a viewer in a layer. The code uses the dimensions of the incoming image to size and position the viewer. On the machine I use for developing, I have found that the image often hasn't fully loaded by the time the code asks for its width and a zero is returned, instead. As a result, the viewer is improperly sized and positioned.

Is there any way I can make the execution wait until the image object has loaded? I've included the main function, an example of the array it works with and a couple of calls. I didn't include all of the supporting functions, so this code won't run. If you need to see it work, let me know and I'll post the whole mess of it. I should state here that I used the Image Thumbnail viewer (c) Dynamic Drive (www.dynamicdrive.com) as my starting point, although I have since modified it considerably.



imgs = new Array(
"img1","imgtype","artist","copyright holder","copyright yr","img1.jpg",
"img2","imgtype","artist","copyright holder","copyright yr","img2.jpg");

<a href="javascript: void does_nothing()"
onClick="return showPic(0, _left, true)"
<img src="img1_thumbnail.jpg">
</a>
<a href="javascript: void does_nothing()"
onClick="return showPic(1, _left, true)"
<img src="img2_thumbnail.jpg">
</a>


function showPic(pos, lr, hasNav){
if (ie || ns6){
var pgyoffset;
var horzpos;
var edgeofpage;
var vertpos;
var divstrings;

//check for out-of-bound values and wrap to front or back of array
pos = wraparray(pos, imgs.length, 6);

//set position globals
setpos(pos);

//get the main div
imgobj = document.getElementById ? document.getElementById("showimage") : document.all.showimage;

//get the image
var thisimg = new Image();
thisimg.src = imgs[posImg];

//calculate each of these values once
var ns6winwd = window.innerWidth;
var iewinwd = ietruebody().clientWidth;
var iescrollwd = ietruebody().scrollLeft;
var imgwd = thisimg.width;

//calculate the position of the layer
vertpos = ns6 ? pageYOffset+10 : ietruebody().scrollTop+10;
if (lr == _left){
horzpos = ns6 ? pageXOffset+(ns6winwd/2)-(imgwd) : iescrollwd+(iewinwd/2)-(imgwd);
edgeofpage = ns6 ? pageXOffset : iescrollwd; //get the left edge of the window
if (horzpos < (edgeofpage + 10)){
horzpos = edgeofpage + 10;
}
}else if (lr == _right){
horzpos = ns6 ? pageXOffset+(ns6winwd/2) : iescrollwd+(iewinwd/2);
edgeofpage = ns6 ? ns6winwd : iescrollwd+(iewinwd); //get the right edge of the window
if ((horzpos + imgwd) > (edgeofpage - 10)){
horzpos = edgeofpage - imgwd - 10;
}
}//endif

//set the position and width of the div object
imgobj.style.left = horzpos+"px";
imgobj.style.top = vertpos+"px";
imgobj.style.width = imgwd;

//construct divstrings for each of the sub divs
//****I left this code out for clarity's sake****

//set the content and turn on the object
imgobj.innerHTML = divstrings;
imgobj.style.visibility = "visible";
return false;
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true;
}
//end showPic

glenngv
06-02-2005, 02:47 PM
Try this:

function showPic(pos, lr, hasNav){
//get the image
var thisimg = new Image();
thisimg.onload = function(){loadPic(pos, lr, hasNav)};
thisimg.src = imgs[posImg];
}
//end showPic

function loadPic(pos, lr, hasNav){
if (ie || ns6){
var pgyoffset;
var horzpos;
var edgeofpage;
var vertpos;
var divstrings;

//check for out-of-bound values and wrap to front or back of array
pos = wraparray(pos, imgs.length, 6);

//set position globals
setpos(pos);

//get the main div
imgobj = document.getElementById ? document.getElementById("showimage") : document.all.showimage;

//calculate each of these values once
var ns6winwd = window.innerWidth;
var iewinwd = ietruebody().clientWidth;
var iescrollwd = ietruebody().scrollLeft;
var imgwd = this.width;

//calculate the position of the layer
vertpos = ns6 ? pageYOffset+10 : ietruebody().scrollTop+10;
if (lr == _left){
horzpos = ns6 ? pageXOffset+(ns6winwd/2)-(imgwd) : iescrollwd+(iewinwd/2)-(imgwd);
edgeofpage = ns6 ? pageXOffset : iescrollwd; //get the left edge of the window
if (horzpos < (edgeofpage + 10)){
horzpos = edgeofpage + 10;
}
}else if (lr == _right){
horzpos = ns6 ? pageXOffset+(ns6winwd/2) : iescrollwd+(iewinwd/2);
edgeofpage = ns6 ? ns6winwd : iescrollwd+(iewinwd); //get the right edge of the window
if ((horzpos + imgwd) > (edgeofpage - 10)){
horzpos = edgeofpage - imgwd - 10;
}
}//endif

//set the position and width of the div object
imgobj.style.left = horzpos+"px";
imgobj.style.top = vertpos+"px";
imgobj.style.width = imgwd;

//construct divstrings for each of the sub divs
//****I left this code out for clarity's sake****

//set the content and turn on the object
imgobj.innerHTML = divstrings;
imgobj.style.visibility = "visible";
return false;
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true;
}
//end loadPic

mpclubfoot
06-10-2005, 08:40 PM
glenngv,

Sorry it took me a while to get back to you. Just wanted to let you know that YOU ROCK!!!

Thanks a lot!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum