Changing img's before printing...

[Michael J Whitmore]

Greetings,

I have three potential sets of images that appear in a document. The
first are low-resolution print images (lowres images). The second are
much higher resolution images (hires images) that need to be resized
to the lowres height and width. The third are common figures whose
source should be changed just like the print images.

The print and common images are called in via onload events (thanks to
Lasse Reichstein Nielse for helping out with that part).

This is the part that works: The onbeforeprint event calls the code
that scans the document for any div elements that have a TLFIG id.
Those elements have a src attribute that identifies the filename of
the display image. A new image is created and inserted as a child to
the div element with the TLFIG id. Internet Explorer then holds up
the print process until all these images are completely loaded into
the document. Everything looks cool.

This is the part that doesn't work: Based on the fact that IE holds
up the print job until the images are loaded I thought that if I put
code in the onload event of the image that changed the src to the
other files IE would wait until THAT is loaded, WRONG! Even though
the onload event clearly hasn't finished the print command blazes
right along and the lowres images are what appear in the document.

NOTE if an alert box is put in to halt the print command the
hires/common images DO appear in the final product. This proves it is
a timing issue.

My question obviously is how do I simulate what the alert box does
without having all the end users having to click on an alert box?

window.onbeforeprint = beforePrint;

function beforePrint() {
// length isn't vaild if only one DIV is found
if (document.all.TLFIG) {
if (!TLFIG.length){
TLFIG.className = "showbrk";
ImgElement = showFig(TLFIG);
} else {
for (fcount = 0; fcount<TLFIG.length; fcount++) {
//alert(fcount);
TLFIG[fcount].className = "showbrk";
showFig(TLFIG[fcount]);
}
}
alert("Pow!!! this magically allows the hires print images to
appear");
}
…
}

function showFig(fig) {
var mkimageLoaded = function(){ return function()
{loadPrintFig();} }
if (!fig.hasChildNodes()) {
img = new Image();
img.src = "figures/" + fig.src;
img.id = "TLFIGLOADED"
img.psrc = fig.src;
img.onload = mkimageLoaded();
fig.insertBefore(img, fig.firstChild);
}
return img;
}

function loadPrintFig() {
ImgElement = event.srcElement;
imgprint = new Image();
imgcommfig = new Image();
imgprint.src = "figures/print/" + ImgElement.psrc;
imgcommfig.src = ImgElement.psrc;
//width of 28 is the IE graphic not found illustration
if (imgcommfig.width == 28) {
if (imgprint.width == 28) {
//alert("Final image should be the regular figure");
} else {
// Figure loaded since onload() called this function
//alert("Final image should be the print figure");
// Get the original height and width
height = ImgElement.height;
width = ImgElement.width;
//alert("The height = " +height+ "The width = " +width);
// Set the print figure as the source
ImgElement.onload = "";
ImgElement.src = imgprint.src
// Set the hires height and width to the lowres values
ImgElement.width = width
ImgElement.height = height
}
} else {
//alert("Final image should be the common figure");
ImgElement.onload = "";
ImgElement.src = imgcommfig.src;
}
}