Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Why can't I get the image sizes constantly?

    I have a web page which is static html page. Due to the web server restriction, I can't use jsp page. On the web page, I have a table containing a large collection of images storing on the server. Since some images are too large, I have to compress them based on their sizes.
    I used JavaScript to get the sizes. The problem is some times, the image sizes are 0, but when I refresh the pages or re-visit the page, the image sizes are correct for the same image.
    After many attemps, I began to doubt this issue is caused by JavaScript itself---it's not that stable when dealing with a lot of data.
    I expect any expert can clarify me, higly appreciated.

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by jackiecheng View Post
    I used JavaScript to get the sizes. The problem is some times, the image sizes are 0, but when I refresh the pages or re-visit the page, the image sizes are correct for the same image.
    Before reading the dimensions of an image, you need to be certain that it has loaded. Use an onload event handler.

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile For the very large image, I have to compress it before loading it into html page.

    Unfortunately, it's not a public page so I can't provide a link to it. The following is the JavaScript code to deal with the images, you can ignore the special tags like WWWAnswer Token=.
    <TABLE BORDER=1 width="100%" height=100% rules = all frame = all cellspacing="0" cellpadding="0%">
    <script language="JavaScript" type="text/JavaScript">

    var imgLocation = "/webaka/images/";
    var colnum = 0;//This variable is set to control the column number in a row.
    var i = 1; //This variable is used to identify each image in the table.
    document.open();
    document.write("<WWWAnswer Token=T_TOCSBLOCK Info=Begin> <!--From$=25 To$=48 MAX=100-->");
    if(colnum == 0){
    document.write("<TR>");
    }
    var SN = String(<WWWAnswer Token=T_TAG Info=SN>);
    var imgParName = imgLocation + SN.substring(0,3) + "/" + SN;
    var imgName = imgParName + ".jpg";

    document.write("<TD align = \"center\" width=\"420\" height=\"300\">");
    var img = new Image();
    img.src = imgParName + ".jpg";

    if((img.width-0)>336 && (img.height-0)>240){
    var newWidth;
    var newHeight;
    var ratio1 = (img.width-0)/336;
    var ratio2 = (img.height-0)/240;
    var ratio = (ratio1 > ratio2)?ratio1 : ratio2;
    newWidth = (parseInt(img.width/ratio)).toString();
    newHeight = (parseInt(img.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=" + newWidth + " height=" + newHeight);
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    else if((img.width-0)>336){
    var newWidth;
    var newHeight;
    var ratio = (img.width-0)/336;
    newWidth = (img.width/ratio).toString();
    newHeight = (parseInt(img.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=" + newWidth + " height=" + newHeight);
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    else if((img.height-0)>240){
    var newWidth;
    var newHeight;
    var ratio = (img.height-0)/240;
    newWidth = (parseInt(img.width/ratio)).toString();
    newHeight = (parseInt(img.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=\"" + newWidth + "\" height=\"" + newHeight + "\"");
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    else if((img.width-0)==0) {

    var newWidth;
    var newHeight;
    var ratio = 1;
    newWidth = (parseInt(img.width/ratio)).toString();
    newHeight = (parseInt(img.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=\"300\" height=\"250\"");
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");

    }
    else{
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    </script>
    <BR><WWWAnswer Token=T_TABLEOCON Info="<WWWAnswer Token=T_TAG Info=SN>">
    <script language="JavaScript" type="text/JavaScript">
    document.write("</TD>");
    </script>
    <script language="JavaScript" type="text/JavaScript">
    colnum ++;
    i++;
    if(colnum == 3){
    colnum = 0;
    document.write("</TR>");
    }
    document.write("<WWWAnswer Token=T_TOCSBLOCK Info=End>");
    </script>

    </TABLE>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    var img = new Image();
    img.onload = function(){
      //if-statements here
      //change all occurrences of img.width to this.width and img.height to this.height
      if (this.width>336 && this.height>240){
        ...
      }
      else if (this.width>336){
        ...
    
      }
      else if (this.height>240){
        ...
      }
    }
    img.src = imgParName + ".jpg";

  • #5
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Everything is screwed up when I tried these code.

    glenngv,
    Your code looks very nice, but everything is screwed up when I tried these code. I just did what you told. What I got is only two images on two different pages. I don't know what's wrong. Here is the code I used to replace the old one.

    <TABLE BORDER=1 width="100%" height=100% rules = all frame = all cellspacing="0" cellpadding="0%">
    <script language="JavaScript" type="text/JavaScript">

    var imgLocation = "/webaka/images/";
    var colnum = 0;//This variable is set to control the column number in a row.
    var i = 1; //This variable is used to identify each image in the table.
    document.open();
    document.write("<WWWAnswer Token=T_TOCSBLOCK Info=Begin> <!--From$=25 To$=48 MAX=100-->");
    if(colnum == 0){
    document.write("<TR>");
    }
    var SN = String(<WWWAnswer Token=T_TAG Info=SN>);
    var imgParName = imgLocation + SN.substring(0,3) + "/" + SN;
    var imgName = imgParName + ".jpg";

    document.write("<TD align = \"center\" width=\"420\" height=\"300\">");
    var img = new Image();
    img.onload = function(){
    //if-statements here
    //change all occurrences of img.width to this.width and img.height to this.height
    if((img.width-0)>336 && (img.height-0)>240){
    var newWidth;
    var newHeight;
    var ratio1 = (img.width-0)/336;
    var ratio2 = (img.height-0)/240;
    var ratio = (ratio1 > ratio2)?ratio1 : ratio2;
    newWidth = (parseInt(img.width/ratio)).toString();
    newHeight = (parseInt(img.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=" + newWidth + " height=" + newHeight);
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    else if((img.width-0)>336){
    var newWidth;
    var newHeight;
    var ratio = (img.width-0)/336;
    newWidth = (img.width/ratio).toString();
    newHeight = (parseInt(img.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=" + newWidth + " height=" + newHeight);
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    else if((img.height-0)>240){
    var newWidth;
    var newHeight;
    var ratio = (img.height-0)/240;
    newWidth = (parseInt(img.width/ratio)).toString();
    newHeight = (parseInt(img.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=\"" + newWidth + "\" height=\"" + newHeight + "\"");
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    else if((img.width-0)==0) {

    var newWidth;
    var newHeight;
    var ratio = 1;
    newWidth = (parseInt(img.width/ratio)).toString();
    newHeight = (parseInt(img.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=\"300\" height=\"250\"");
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");

    }
    else{
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    }
    img.src = imgParName + ".jpg";

    </script>
    <BR><WWWAnswer Token=T_TABLEOCON Info="<WWWAnswer Token=T_TAG Info=SN>">
    <script language="JavaScript" type="text/JavaScript">
    document.write("</TD>");
    </script>
    <script language="JavaScript" type="text/JavaScript">
    colnum ++;
    i++;
    if(colnum == 3){
    colnum = 0;
    document.write("</TR>");
    }
    document.write("<WWWAnswer Token=T_TOCSBLOCK Info=End>");
    </script>

    </TABLE>

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    You didn't follow what I said. I said you need to change img to this.
    Code:
    var img = new Image();
    img.onload = function(){
      //if-statements here
      //change all occurrences of img.width to this.width and img.height to this.height
      if (this.width>336 && this.height>240){
        ...
      }
      else if (this.width>336){
        ...
    
      }
      else if (this.height>240){
        ...
      }
    }
    img.src = imgParName + ".jpg";

  • #7
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation I am really sorry, I pasted the old file.

    glenngv,
    I am really sorry, I pasted the wrong file but I used the right one in my program, here is what I used before.

    <TABLE BORDER=1 width="100%" height=100% rules = all frame = all cellspacing="0" cellpadding="0%">
    <script language="JavaScript" type="text/JavaScript">

    var imgLocation = "/webaka/images/";
    var colnum = 0;//This variable is set to control the column number in a row.
    var i = 1; //This variable is used to identify each image in the table.
    document.open();
    document.write("<WWWAnswer Token=T_TOCSBLOCK Info=Begin> <!--From$=25 To$=48 MAX=100-->");
    if(colnum == 0){
    document.write("<TR>");
    }
    var SN = String(<WWWAnswer Token=T_TAG Info=SN>);
    var imgParName = imgLocation + SN.substring(0,3) + "/" + SN;
    var imgName = imgParName + ".jpg";

    document.write("<TD align = \"center\" width=\"420\" height=\"300\">");
    var img = new Image();
    this.onload = function(){
    //if-statements here
    //change all occurrences of img.width to this.width and img.height to this.height
    if((this.width-0)>336 && (this.height-0)>240){
    var newWidth;
    var newHeight;
    var ratio1 = (this.width-0)/336;
    var ratio2 = (this.height-0)/240;
    var ratio = (ratio1 > ratio2)?ratio1 : ratio2;
    newWidth = (parseInt(this.width/ratio)).toString();
    newHeight = (parseInt(this.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=" + newWidth + " height=" + newHeight);
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    else if((this.width-0)>336){
    var newWidth;
    var newHeight;
    var ratio = (this.width-0)/336;
    newWidth = (this.width/ratio).toString();
    newHeight = (parseInt(this.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=" + newWidth + " height=" + newHeight);
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    else if((this.height-0)>240){
    var newWidth;
    var newHeight;
    var ratio = (this.height-0)/240;
    newWidth = (parseInt(this.width/ratio)).toString();
    newHeight = (parseInt(this.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=\"" + newWidth + "\" height=\"" + newHeight + "\"");
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    else if((this.width-0)==0) {

    var newWidth;
    var newHeight;
    var ratio = 1;
    newWidth = (parseInt(this.width/ratio)).toString();
    newHeight = (parseInt(this.height/ratio)).toString();
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" width=\"300\" height=\"250\"");
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");

    }
    else{
    document.write("<img name=\'trmkImg" + i + "\' src=\"" + imgName + "\"");
    document.write(" border=\"0\" alt=\"Mark Image\" title=\"Click to view enlarged image\">");
    }
    }
    img.src = imgParName + ".jpg";

    </script>
    <BR><WWWAnswer Token=T_TABLEOCON Info="<WWWAnswer Token=T_TAG Info=SN>">
    <script language="JavaScript" type="text/JavaScript">
    document.write("</TD>");
    </script>
    <script language="JavaScript" type="text/JavaScript">
    colnum ++;
    i++;
    if(colnum == 3){
    colnum = 0;
    document.write("</TR>");
    }
    document.write("<WWWAnswer Token=T_TOCSBLOCK Info=End>");
    </script>

    </TABLE>

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    You should not change img.onload to this.onload. Change only the ones inside the onload handler.
    Code:
    var img = new Image();
    img.onload = function(){
      //if-statements here
      //change all occurrences of img.width to this.width and img.height to this.height
      if (this.width>336 && this.height>240){
        ...
      }
      else if (this.width>336){
        ...
    
      }
      else if (this.height>240){
        ...
      }
    }
    img.src = imgParName + ".jpg";
    BTW, please enclose your code in between [code] [/code] tags so that it will be readable.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •