img readyState problem

[Michael J Whitmore]

I am getting tired of losing hair over this. Here is a function that
simply inserts one of three images into a document right before
printing. It is called for every element that has a specific id in
the document with the onbeforeprint window call. The chosen image
will then be inserted into the document as a child element of ‘fig'.

The problem is the images decide on their own whether or not to show
up to the party. Random images constantly remain in a readyState of
uninitialized. However, for some reason when an alert box is shown
exactly 2 times the image will come out of the uninitialized state to
the complete state.

I don't want my clients to have to hit 2 alert boxes for each image
that is to be printed. How can I force these stupid images out of the
uninitialized state without 2n alert boxes?

Notes:
The element fig has no child nodes in the document. That is where the
image goes and why there is a "f (!fig.hasChildNodes()) {" test. Once
inserted they will stay in the document unless it is closed. No need
to reload something that is already there.
The 100,000 value is simply a way to keep this out of an infinite
loop.
The preferred order of images to chose from is imgcommfig, imgprint,
img

function showfig(fig) {
//alert("fig.outerHTML" +fig.outerHTML);
if (!fig.hasChildNodes()) {
//alert("No Child Nodes");
img = new Image();
imgprint = new Image();
imgcommfig = new Image();

img.src = "figures/" + fig.src;
imgprint.src = "figures/print/" + fig.src;
imgcommfig.src = fig.src;


//if the print figure doesn't exist reload display figure for
printing
//width of 28 is the IE graphic not found illustration, ie the
block with an X graphic


ImageWidth = imgcommfig.width;
Countimgcommfig = 0;
if (ImageWidth == 28) {
// Don't do anything since the file doesn't exist
//alert("imgcommfig doesn't exist, width of 28");
} else {
ReadyState = imgcommfig.readyState;
while (ReadyState != "complete" && Countimgcommfig <
100000) {
Countimgcommfig = Countimgcommfig + 1;
ReadyState = imgcommfig.readyState;
ImageWidth = imgcommfig.width;
//alert("The imgcommfig has not loaded yet. \nIt's
Next ReadyState = " +ReadyState);
}
}
ImageWidth = imgprint.width;
Countimgprint = 0;
if (ImageWidth == 28) {
// Don't do anything since the file doesn't exist
//alert("imgprint doesn't exist, width of 28");
} else {
ReadyState = imgprint.readyState;
while (ReadyState != "complete" && Countimgprint < 100000)
{
Countimgprint = Countimgprint + 1;
ReadyState = imgprint.readyState;
ImageWidth = imgprint.width;
//alert("The imgprint has not loaded yet. \nIt's Next
ReadyState = " +ReadyState);
}
}
ImageWidth = img.width;
Countimg = 0;
if (ImageWidth == 28) {
// Don't do anything since the file doesn't exist
//alert("img doesn't exist, width of 28");
} else {
ReadyState = img.readyState;
while (ReadyState != "complete" && Countimg < 100000) {
Countimg = Countimg + 1;
ReadyState = img.readyState;
ImageWidth = img.width;
//alert("The img has not loaded yet. \nIt's Next
ReadyState = " +ReadyState);
}
}



if (imgcommfig.width == 28) {
if (imgprint.width == 28) {
//alert("Printing img");
fig.insertBefore(img, fig.firstChild);
} else {
//alert("Printing imgprint");
fig.insertBefore(imgprint, fig.firstChild);
imgprint.width = img.width
imgprint.height = img.height
}
} else {
//alert("Printing imgcommfig");
fig.insertBefore(imgcommfig, fig.firstChild);
}
} else {
//alert("Yes Child Nodes");
}
}

 

[Lasse Reichstein Nielsen]

I am getting tired of losing hair over this. Here is a function that
simply inserts one of three images into a document right before
printing. It is called for every element that has a specific id in
the document with the onbeforeprint window call.

My spider sense crawls here. ID's are supposed to be unique in a
document, so every element that has a specific id should be at most
one element. Am I misreading something?

The chosen image will then be inserted into the document as a child
element of ‘fig'.

The problem is the images decide on their own whether or not to show
up to the party. Random images constantly remain in a readyState of
uninitialized. However, for some reason when an alert box is shown
exactly 2 times the image will come out of the uninitialized state to
the complete state.

Odd. But that's what asynchroneous download will do to you.

The 100,000 value is simply a way to keep this out of an infinite
loop.

Busy waiting is never a good choice.

The preferred order of images to chose from is imgcommfig, imgprint,
img

imgcommfig is the same as fig.src, so it should already be loaded?
I assume the order is increasing?


The readyState property is, AFAIK, IE only. You might want to use
the onload/onerror event handlers instead.

How about:
---
function showfig(fig) {
if (fig.hasChildNodes()) {
return true;
}

var urls = [ // order of decreasing preferrence
"figures/" + fig.src,
"figures/print/" + fig.src,
fig.src
];
var imgs = [];
var flags = [];
var done = false;
var imgload = function(num,state) {
if (done) {return;}
if (typeof (imgs[num].complete) == "boolean") {
state = imgs[num].complete; // Opera
}
flags[num]=state;
imgs[num].onerror = imgs[num].onload = function(){};
for (var i = 0; i < urls.length ;i++) {
if (flags === true) {done=true;finish(i);return;}
if (flags === undefined) {return;}
}
}
var finish = function(num) {
var img = imgs[num]; // best picture that loaded correctly
// do something:
fig.appendChild(img);
setTimeout(print,10); // gives Mozilla time to update
}

var mkImgload =
function(num,state){return function(){imgload(num,state);};};
for (i=0;i<urls.length;i++) {
imgs=new Image();
imgs.onload = mkImgload(i,true);
imgs.onerror = mkImgload(i,false);
imgs.src = urls;
}
return false; // cancel printing until images have loaded!
}
---
(I can't seem to get the onerror handler to work in Opera 7.21, though.
I suspect a bug, so it will probably be fixed)


/L