Images don't load on first click...

  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

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')">
 
  1.  
  2. <img src="longislandsound11-08/LongIslandSound11-08_405_thumb.jpg"
  3.      vspace=10 hspace=10
  4.      class="thumb"
  5.      id="longislandsound11-08/LongIslandSound11-08_405.jpg"
  6.      onmousedown="loadphoto('longislandsound11-08/LongIslandSound11-08_405.jpg')"
  7.      onclick="showphoto('East Hampton')">
  8.  

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;
}
 
  1.  
  2. function loadphoto(path) {
  3.         pic = new Image();  /* no var = global! */
  4.         pic.src = path;
  5. }
  6.  
  7. function showphoto(cap) {
  8.         var h = document.getElementById('main').offsetHeight-20;
  9.         var w = document.getElementById('main').offsetWidth-20;
  10.         PhotoBox.width = pic.width;
  11.         PhotoBox.height = pic.height;
  12.         if (h < pic.height) {
  13.                 PhotoBox.width = h/pic.height*pic.width;
  14.                 PhotoBox.height = h;
  15.         }
  16.         if (w < pic.width) {
  17.                 PhotoBox.width = w;
  18.                 PhotoBox.height = w/pic.width*pic.height;
  19.         }
  20.         PhotoBox.src=pic.src;
  21.         Caption.textContent = cap;
  22. }
  23.  


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
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

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);
}
 
  1.  
  2. function loadphoto(path,cap) {
  3.     pic = new Image();  /* no var = global! */
  4.     pic.src = path;
  5.     Caption.textContent = "Loading...";
  6.     PhotoBox.style.display = "none";
  7.     cap=cap.replace(/'/g,"\'");
  8.     showdone(cap);
  9. }
  10.  
  11. function showphoto() {
  12.     var h = document.getElementById('main').offsetHeight-20;
  13.     var w = document.getElementById('main').offsetWidth-20;
  14.     PhotoBox.width = pic.width;
  15.     PhotoBox.height = pic.height;
  16.     if (h < pic.height) {
  17.         PhotoBox.width = h/pic.height*pic.width;
  18.         pic.width = PhotoBox.width;
  19.         PhotoBox.height = h;
  20.         pic.height = h;
  21.     }
  22.     if (w < pic.width) {
  23.         PhotoBox.width = w;
  24.         PhotoBox.height = w/pic.width*pic.height;
  25.         pic.width = PhotoBox.width;
  26.         pic.height = PhotoBox.height;
  27.     }  
  28.     PhotoBox.src=pic.src;
  29.     PhotoBox.style.display = "";
  30. }  
  31.    
  32. function showdone(cap) {
  33.     if (pic.complete) {
  34.         Caption.textContent = cap;
  35.         showphoto();
  36.    } else setTimeout("showdone('"+cap+"')",500);
  37. }
  38.  

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 :D

The resizing algo is a little improved in this one too.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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


You can bet I'll be chomping at the bit to help with the next one, now. :P
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Quote:
Okay since you all were so much help here's how I finally solved this:
It sometimes takes someone three days to reply to one of my posts... you just have to be patient.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 165 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.