...

View Full Version : Why can't I get the image sizes constantly?



jackiecheng
08-24-2007, 03:51 PM
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.:eek:

Arty Effem
08-24-2007, 05:16 PM
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.

jackiecheng
08-25-2007, 02:07 PM
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>

glenngv
08-26-2007, 01:06 AM
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";

jackiecheng
08-27-2007, 05:54 PM
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>

glenngv
08-27-2007, 08:19 PM
You didn't follow what I said. I said you need to change img to this.

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";

jackiecheng
08-27-2007, 09:37 PM
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>

glenngv
09-04-2007, 09:31 PM
You should not change img.onload to this.onload. Change only the ones inside the onload handler.


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
tags so that it will be readable.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum