image.complete [Archive] - WebDeveloper.com

crake

09-01-2003, 08:56 AM

I have fighted two full days with this proplem but I'm not resolved it. My problem:
1. When I click the image in webpage, I want to load another bigger image to new window (bigger image url is coming from my php script).
2. The window size must be image size + 20px.

I have to resolve image width and height for window size. So my main problem is how to use image.complete. Image width and height is possible resolve only when image is fully loaded cache. Now I'm trying to get boolean value (true) when my image is fully loaded, but it didn't work.

Can anybody help me how to resolve this kind of problem?

my Html code:

<a href="javascript:loadImage('image.jpg','Product Name');"><img src="image.jpg"></a>

my JavaScript code:

// PRODUCT IMAGE WINDOW - 29.08.2003 - AS
// Load image into object
function ImageObjecti(imgUrl, prodName) {
// Properties
var redy;
var prodName;
var prodImg = new Image();

// Set variables
this.imgUrl = imgUrl;
this.prodName = prodName;
prodImg.src = imgUrl;
this.redy = prodImg.complete;

// Insert methods into object
this.getRedy = isRedy;
this.getImgUrl = returnImgUrl;
this.getProdName = returnProdName;
}

// Methods
function isRedy() {
return this.redy;
}
function returnImgUrl() {
return this.imgUrl;
}
function returnProdName() {
return this.prodName;
}

// Checks when image is loaded
function check() {
var loaded;
var imgUrl;
var prodName;

loaded = Objecti1.getRedy();

alert("Check function --> " + loaded);
/*if(loaded == true) {
imgUrl = Objecti1.getImgUrl();
prodName = Objecti1.getProdName();
openProductWin(imgUrl, prodName);
}
else {
setTimeout('check();',3000);
}*/

}

// Load image first
function loadImage(imgUrl, prodName) {
var redy;
var prodImg = new Image();

prodImg.src = imgUrl;
redy = prodImg.complete;

Objecti1 = new ImageObjecti(imgUrl, prodName);

alert("Image load --> " + redy);
if(redy == true) {
openProductWin(imgUrl, prodName);
}
else {
setTimeout('check();',3000);
}

}

// Open new product image window
function openProductWin(imgUrl, prodName) {
var winName;
var settings;
var productWin;
var prodImgWidth;
var prodImgHeight;
var prodImg = new Image();

prodImg.src = imgUrl;
prodImgWidth = prodImg.width + 20;
prodImgHeight = prodImg.height + 60;

// Remove some bad charachters
winName = prodName.replace(" ","");
winName = winName.replace("+","");
winName = winName.replace("-","");
winName = winName.replace("*","");
winName = winName.replace("/","");
winName = winName.replace("?","");
winName = winName.replace("!","");
winName = winName.replace("#","");

settings = 'directories=no,location=no,menubar=no,status=no,titlebar=no,toolbar=no,resizable=yes,scrollbars=no, width='+prodImgWidth+',height='+prodImgHeight+',screenX=0,screenY=0,left=0,top=0';
//alert(settings);

productWin = window.open("",winName,settings);
productWin.document.write("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd\">");
productWin.document.write("<HTML>");
productWin.document.write("<HEAD>");
productWin.document.write("<TITLE>"+ prodName +"</TITLE>");
productWin.document.write("<META http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\">");
productWin.document.write("<LINK href=\"css/style.css\" type=\"text/css\" rel=\"stylesheet\">");
productWin.document.write("</HEAD>");
productWin.document.write("<BODY bgColor=\"silver\">");
productWin.document.write("<IMG src=\"" + imgUrl + "\" class=\"productImage\" name=\"prodImg\">");
productWin.document.write("<BR><BR>");
productWin.document.write("<A href=\"javascript:window.close();\">Close window</A>");
productWin.document.write("</BODY>");
productWin.document.write("</HTML>");

}

Gollum

09-01-2003, 09:19 AM

In other words, do something like this...

// Open new product image window
function openProductWin(imgUrl, prodName)
{
var prodImg = new Image();
prodImg.onload = openProductWinLoaded;
prodImg.onerror = openProductWinError;
prodImg.prodName = prodName;
prodImg.src = imgUrl;

// now wait for the image to be loaded
}

function openProductWinLoaded()
{
openProductWin2(this, this.prodName);
}

function openProductWinError()
{
alert("Cant't get the image: " + this.prodName);
}

function openProductWin2(prodImg, prodName)
{
var winName;
var settings;
var productWin;
var prodImgWidth;
var prodImgHeight;

prodImgWidth = prodImg.width + 20;
prodImgHeight = prodImg.height + 60;

// Remove some bad charachters
...
//rest of openProductWin code here