Announcement

**Willy Duitt** · Feb 19, 2004, 04:26 PM

You are looking for complete
eg: document.images['imageName'].complete

Here is an example which switches a loading image with
the actual image once the full size image completely loads.

Code:

<script type=text/javascript>
 <!-- Begin Hide //
  var myImage = new Image()	
  myImage.src = 'LARGE_IMAGE.jpg';
   function chkLoad() {
    if(myImage.complete) {
     document.images['theImage'].src=myImage.src;
     clearTimeout(isLoaded);
    }
    if(!myImage.complete) {
      document.images['theImage'].src="SMALL_LOADING_IMAGE.jpg";
      var isLoaded = setTimeout('chkLoad()',100);
    }
  }
// End Hide -->
</script>
</HEAD>

<BODY onload="chkLoad()">
<CENTER>
<BR><BR>
<FONT  size=7 color=#666666><B>Image Loading Test</B></FONT><BR />
<BR><BR>
<img name="theImage" src="" width="640" height="480" alt="Adelphia Coliseum">

.....Willy

Edit: Changed the example script.

**Richard2003** · Feb 19, 2004, 04:43 PM

Thanks Willy, but what is the difference between

if (myImage.complete)

and

if (!myImage.complete)

**Willy Duitt** · Feb 19, 2004, 04:47 PM

One means NOT complete.

.....Willy

**JAVAEOC** · Feb 19, 2004, 04:57 PM

but willy what is the point of doing that?
As far as i know the script loads first and therfore the image should be loaded first too.

then when the body is loaded the image is ALWAYS already loaded

am i worng?

**Richard2003** · Feb 19, 2004, 04:58 PM

OK Willy, I understand. Here below is my source. When performing show("image.jpg"), the image will be popup in the function openPopImg(). Prior to popup it, I get the width and height of the image. I have added if (imgTemp.complete) according your example, but what do I need to do when it's not?
else { ???? }

Thanks

function show(picName) {
var imgWidth=getImgWidth(picName);
var imgHeight=getImgHeight(picName);
openPopImg(picName,imgWidth,imgHeight);
}

function getImgWidth(picName) {
var imgTemp = new Image();
imgTemp.src = picName;
if (imgTemp.complete) {
imgWidth = imgTemp.width;
}
return (imgWidth)
}

function getImgHeight(picName) {
var imgTemp = new Image();
imgTemp.src = picName;
if (imgTemp.complete) {
imgHeight = imgTemp.height;
}
return (imgHeight)
}

**Willy Duitt** · Feb 19, 2004, 05:20 PM

JAVAEOC;

If you declare the images width and height in your image(s) tag. The browser will reserve that place on the page and continue loading the rest of the page. Therefore, if you have an extremely large byte image, the page can be displayed without the image being completely loaded.

If you fail to define the width and height in your image tags, the loading of the page will stall until the image loads before the browser will load the rest of the page. And yes, in this event the image will be loaded when the page renders but you will have an extremely long loading time. (I have probably already left the page by this time)

Sorry Richard;

That script is too incomplete for me to provide an answer. I do not see where picName was ever defined and I am too lazy right now to but together something I can actually run.

If you can post a link or a script that has all the components necassry to run I will try to take another look.

.....Willy

**Richard2003** · Feb 19, 2004, 05:40 PM

Willy:

My website is www.charvi.com and there, please click on 'Belgian Fleet' in the left menu panel. Then you will see columns with digits, which are links. When you click on a digit, it calls the function show(). You can download them, the file of the first column is www.charvi.com/fleet/a1.htm and the show() function is in the file www.charvi.com/fleet/popup.js
Actually the links don't work because of the present problem.

I hope this is enough... I would be very grateful if you could help me to solve this 'small' problem.

Richard

**Willy Duitt** · Feb 19, 2004, 07:09 PM

If you are trying to open a window the size of the images try this code would be easier.

Or, you can try working something like this in to your present codes.

Code:

<HTML>
<HEAD>
<BASE HREF="http://www.charvi.com/fleet/">

<script type="text/javascript">
 <!--//
  function getImage(imgURL) {
   var img = new Image();
    if(document.images) 
       img.src = imgURL;
       img.onload = alertImage;
  }
  function alertImage(imgURL) {
    alert(this.width + 'x' + this.height);
  }
 //-->
</script>
</HEAD>

<BODY>
<a href="1382.jpg" onClick="getImage(this.href); return false">1382</a></td>

.....Willy

**JAVAEOC** · Feb 19, 2004, 07:43 PM

Willy i ment this:
var whatever= new Image()
whatever.src=whereevertheimageis.jpg
that preloads the pic right?

so since the body is only displayed AFTER the script is finished loading shoulnd the img then already be loaded when the body appears, cause the script already finihsed loading... right?

**glenngv** · Feb 19, 2004, 11:41 PM

Other great alternative for popup image viewer is in my sig. It has a smart "Loading..." message while the image is loading.

Announcement

Is the image loaded yet?

Is the image loaded yet?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment