Back To Programming / Scripting / Coding Forum

Images don't load on first click...

mk27
Proficient
Joined: Jun 09, 2009
Posts: 334
Status: Offline

July 24th, 2009, 10:48 am

I wrote an image viewer here:

http://206.251.36.107/photographs/base. ... ber%202008

But I have a problem. The photographs are large, like 250k each, and there are a lot of them. The thumbnails are less than 10k tho, and you can't view more than one full size at a time, so there is no way I want to preload all those images.

The problem is, the image doesn't always display at the first click.

Code: [ Select ]

<img src="longislandsound11-08/LongIslandSound11-08_405_thumb.jpg"
vspace=10 hspace=10
class="thumb"
id="longislandsound11-08/LongIslandSound11-08_405.jpg"
onmousedown="loadphoto('longislandsound11-08/LongIslandSound11-08_405.jpg')"
onclick="showphoto('East Hampton')">

is from the "page source"; the relevant js is:

Code: [ Select ]

function loadphoto(path) {
pic = new Image(); /* no var = global! */
pic.src = path;
}
function showphoto(cap) {
var h = document.getElementById('main').offsetHeight-20;
var w = document.getElementById('main').offsetWidth-20;
PhotoBox.width = pic.width;
PhotoBox.height = pic.height;
if (h < pic.height) {
PhotoBox.width = h/pic.height*pic.width;
PhotoBox.height = h;
}
if (w < pic.width) {
PhotoBox.width = w;
PhotoBox.height = w/pic.width*pic.height;
}
PhotoBox.src=pic.src;
Caption.textContent = cap;
}

The reason I used loadphoto/showphoto with mousedown/onclick is that it did correct the problem at home, but used via the net it does not (so I put "click TWICE on an image to load")*. However, loadphoto() completes since the caption will appear. In fact, it completes even if I use image.onLoad() as a condition -- and yet the pic NEVER appears.

Evidently it is loaded tho, because the second click (even a quick double click) will display it, and once you've viewed it once, it only requires a single click if you want to go back to a previously viewed picture.

MK :mrgreen:

*actually, the problem is not perfectly consistent, and doing it this way does seem to improve the chances of success.

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

July 24th, 2009, 10:48 am

mk27
Proficient
Joined: Jun 09, 2009
Posts: 334
Status: Offline

July 24th, 2009, 3:52 pm

Okay since you all were so much help here's how I finally solved this:

Code: [ Select ]

function loadphoto(path,cap) {
pic = new Image(); /* no var = global! */
pic.src = path;
Caption.textContent = "Loading...";
PhotoBox.style.display = "none";
cap=cap.replace(/'/g,"\'");
showdone(cap);
}
function showphoto() {
var h = document.getElementById('main').offsetHeight-20;
var w = document.getElementById('main').offsetWidth-20;
PhotoBox.width = pic.width;
PhotoBox.height = pic.height;
if (h < pic.height) {
PhotoBox.width = h/pic.height*pic.width;
pic.width = PhotoBox.width;
PhotoBox.height = h;
pic.height = h;
}
if (w < pic.width) {
PhotoBox.width = w;
PhotoBox.height = w/pic.width*pic.height;
pic.width = PhotoBox.width;
pic.height = PhotoBox.height;
}
PhotoBox.src=pic.src;
PhotoBox.style.display = "";
}
function showdone(cap) {
if (pic.complete) {
Caption.textContent = cap;
showphoto();
} else setTimeout("showdone('"+cap+"')",500);
}

image.onload is not very functional in a script body; but image.complete, which I didn't know about, works. Unfortunately because of the js threading (I guess), you can't pass an object via setTimeout (hence the necessary quoting!) so I'm stuck with the global pic, which on a slow dial-up connection means you could click multiple images and end up with the wrong picture under the wrong caption, but this is much better than before