Web Analytics Made Easy -
StatCounter Is the image loaded yet? - CodingForum

Announcement

Collapse
No announcement yet.

Is the image loaded yet?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Is the image loaded yet?

    Hi friends,

    What is the command syntax to know when an image is completedly loaded?

    I need this because when I want to get the image size (width and height), it sometimes returns zero, due to the fact that the image was not yet completely loaded.

    Thanks in advance.
    Richard

  • #2
    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.
    Last edited by Willy Duitt; Feb 19, 2004, 05:40 PM.

    Comment


    • #3
      Thanks Willy, but what is the difference between

      if (myImage.complete)

      and

      if (!myImage.complete)

      Comment


      • #4
        One means NOT complete.

        .....Willy

        Comment


        • #5
          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?
          http://www.bluephoenix.uni.cc/

          Comment


          • #6
            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)
            }

            Comment


            • #7
              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

              Comment


              • #8
                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

                Comment


                • #9
                  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

                  Comment


                  • #10
                    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?
                    http://www.bluephoenix.uni.cc/

                    Comment


                    • #11
                      Other great alternative for popup image viewer is in my sig. It has a smart "Loading..." message while the image is loading.
                      Glenn
                      vBulletin Mods That Rock!

                      Comment

                      Working...
                      X