// Initialization // Roger C. Garrett // 12/16/2009 // // This file contains functions intended to occur at initialization of the page for the Math/Algebra page. // It is assumed that this function will override the document onload method. // var controls = new Array ( "ComboBoxEquationSets", "ComboBoxEquationSelector", "OriginalEquation", "ShowGroupBrackets", "ShowDropBars", "EnableSounds", "RecordDiagnostics", "ShowDiagnosticStatus", "ClearDiagnostics", "ShowRelatedObjectIDsForBrackets", "ShowImplicitMultiplicationSigns", "Go", "Next", "Prev", "CombineLikeTerms", null, // Indicates separation between controls that are fully implemented // (and should be made visible) and those which are not yet implemented // and should therefore remain non-visible. "FOIL", "DistributiveProperty", "CrossMultiply", "Undo", "Replay", "Solve", "ArgumentToApplyToBothSides", "Add", "Subtract", "Multiply", "Divide", "FileReadTest", "ComboBoxEquationSets", "AlwaysUseExplicitMultiplicationSigns", "UseImplicitMultiplicationSignsWhenValid" ); function OnLoad() { // This function overrides the Document.onload method and thereby gets called afte the entire documents // content has been loaded. // // The overriding of this function is done with either a window.addEventListener() or a window.attachEvent // depending on whether or not its running on Internet Explorer, and is currently done at the end of the // section of the HTML page. /****** //adviseUser("Checking for loaded images..."); //report("Checking for loaded images...\n"); //alert("Checking for loaded images...\n"); for (var fileName in g_imagesInfo) { //report(fileName+"\n"); //alert(fileName+"\n"); var thisImage = g_imagesInfo[fileName]; if (!thisImage) { alert("Algebra.getImageInfo("+fileName+")\nNo image info for the file. Was not preloaded."); reportProgrammingError("Algebra.getImageInfo("+fileName+")", "No image info for the file. Was not preloaded.\n"); break; } else { var counter = 0; while (thisImage.width == 0) { //alert("Waiting for "+fileName+" ["+counter+"]"); //adviseUser("Waiting for "+fileName+" ["+counter+"]"); ++counter; } } } My web page makes use of a lot of image files. Not all of those image files are actually used by the initial display of the page. Many of them are only made use of when the user clicks on a button. I want to make sure that all of the image files are actually loaded BEFORE I let the user click on any of those buttons. I load the files using a technique I found on the Internet, in which you create an Image() object for each image file and set its src property to the name of the file (including, of course, the entire URL path to the file). myFilePathAndNameArray = new Array("www.mySite.com/File1.gif","www.mySite.com/File2.gif"); myImagesArray = new Array(); for (var filePathAndName in myFilePathAndNameArray) { var newImage = new Image(); newImage.width = 0; newImage.height = 0; newImage.fileFolderAndName = filePathAndName; newImage.src = filePathAndName; myImagesArray[filePathAndName] = newImage; } My actual array of file names is much larger. And this works. Sort of. My understanding is that when you set the .src property of the Image object it basically tells the browser to REQUEST the specified file, and that the downloading of the file is actually done asynchronously. That is, you can't be assured that the file will actually have been successfully loaded at the next instruction after the setting of the .src . My problem occurs when the user clicks a button which runs some code that needs to know the height and width of the (presumably) loaded image file. The Image() object does indeed have .height and .width properties. And most often, when the user clicks that button, the image file has indeed been successfully and fully loaded and those .height and .width properties are available. So, no problem. But on occassion the user clicks that button BEFORE the desired file has been full loaded, and it therefore fails to get a valid .height or .width value (it gets zero). My first approach to solve this problem was to simply override the onload function and set a flag in my OnLoad that indicates that everything is (presumably) loaded. I could then check that flag within the button processing code and either do the code or not do the code, based on whether the flag indicated that OnLoad had been processed. Effectively, I disable the button until I'm sure that everything is loaded. But that doesn't work. It appears that even after onload has been called it is still possible that the browser is loading my image files. SO I took another approach. Within my OnLoad function I go through all of the Image() objects that I've set up and check each and every one to see whether or not its .width and .height property has been set (i.e. is nonzero). For any one which does not have a valid .width or .height value I go into a loop, repeatedly checking the values until they are non-zero. I know, I know! Extreme chance of an infinite loop! And that's precisely what happens. Even though I absolutely know that the files exist and my program has access to them, by doing that loop, it never succeeds in loading all the files. My suspicion is that, since my code is looping, looping , looping, there is no time for the browser to grab some processing time and finish loading the files. That means that I can't use that approach in order to assure that all my image files are loaded. But how CAN I assure that? I really do need these file to be loaded before I've set up a flag *****/ // Override the onkeypress so that is uses my catchEnter instead, which causes it to // totally ignore the Enter key //alert("IN OnLoad in Initialization.jsl"); // Override onkeypress so that it calls my catchEnter function, which is in initialization.jsl, // and which intercepts and throws away ony press of the Enter key. We do this because we do // NOT want any "form submission" to occur, should the user inadvertantly hit the Enter key. document.onkeypress = catchEnter; /// TEST ComboBox.empty("ComboBoxEquationSets"); ComboBox.addItem("ComboBoxEquationSets", "Diagnostics", 10); ComboBox.addItem("ComboBoxEquationSets", "Set B", 11); ComboBox.addItem("ComboBoxEquationSets", "Set C", 12); ComboBox.addItem("ComboBoxEquationSets", "Set D", 13); ComboBox.empty("ComboBoxEquationSelector"); ComboBox.addItem("ComboBoxEquationSelector", "(X+Y)/(A+B)=S/R", 0); ComboBox.addItem("ComboBoxEquationSelector", "(X*Y)/(A*B)=(A+B-4C+(5*4))/Y", 0); ComboBox.addItem("ComboBoxEquationSelector", "1+2-3+4-5=X", 0); ComboBox.addItem("ComboBoxEquationSelector", "A+A+2A=2B+6B-3B", 0); ComboBox.addItem("ComboBoxEquationSelector", "1+2+A-4=A+4A-5+7A", 0); ComboBox.addItem("ComboBoxEquationSelector", "1+(3-5)+2=0", 0); ComboBox.addItem("ComboBoxEquationSelector", "1+(1/2)=X", 0); ComboBox.addItem("ComboBoxEquationSelector", "A+(1/2)A=Y", 0); ComboBox.addItem("ComboBoxEquationSelector", "(A/2)+(1/2)=X", 0); ComboBox.addItem("ComboBoxEquationSelector", "(A/2)+(4A/5)=X", 0); ComboBox.addItem("ComboBoxEquationSelector", "(1/2)+(2/3)=X", 0); ComboBox.addItem("ComboBoxEquationSelector", "1+(1/3)=J", 0); ComboBox.addItem("ComboBoxEquationSelector", "A=(1/2)A + ((34 - 8)/7)", 0); ComboBox.addItem("ComboBoxEquationSelector", "A*B=(1-2)*X*Y*Z", 0); ComboBox.addItem("ComboBoxEquationSelector", "A*B=1-2", 0); ComboBox.addItem("ComboBoxEquationSelector", "A*B*C=(1-2)/(X+Y)", 0); ComboBox.addItem("ComboBoxEquationSelector", "A+B=1-2", 0); ComboBox.addItem("ComboBoxEquationSelector", "A+B=1*2", 0); ComboBox.addItem("ComboBoxEquationSelector", "(X+7*B-3)/Y=A*B*C", 0); ComboBox.addItem("ComboBoxEquationSelector", "(X+7*B-3)/Y=A+B+C-D+56", 0); ComboBox.addItem("ComboBoxEquationSelector", "(X+7*B-3)/Y=(A*B*C+2)", 0); ComboBox.addItem("ComboBoxEquationSelector", "X/Y=Z", 0); ComboBox.addItem("ComboBoxEquationSelector", "a x=b", 0); ComboBox.addItem("ComboBoxEquationSelector", "x/a=b", 0); ComboBox.addItem("ComboBoxEquationSelector", "a/x=b", 0); ComboBox.addItem("ComboBoxEquationSelector", "a x+b=c", 0); ComboBox.addItem("ComboBoxEquationSelector", "x/a=b/c", 0); ComboBox.addItem("ComboBoxEquationSelector", "a/x=b/c", 0); ComboBox.addItem("ComboBoxEquationSelector", "a(x+b)=c", 0); ComboBox.addItem("ComboBoxEquationSelector", "(x+c)a= b", 0); ComboBox.addItem("ComboBoxEquationSelector", "a/(x+c)=b", 0); ComboBox.addItem("ComboBoxEquationSelector", "a(x+d)+b=c", 0); ComboBox.addItem("ComboBoxEquationSelector", "(x+d)/a=b/c", 0); ComboBox.addItem("ComboBoxEquationSelector", "a/(x+d)=b/c", 0); ComboBox.addItem("ComboBoxEquationSelector", "A=B", 0); ComboBox.addItem("ComboBoxEquationSelector", "A+B=C-D", 0); ComboBox.addItem("ComboBoxEquationSelector", "3 A+2 B=5 X-98 Y", 0); ComboBox.addItem("ComboBoxEquationSelector", "A*B C+G*H=(X Y Z-2)", 0); ComboBox.addItem("ComboBoxEquationSelector", "A/B=C/D-3", 0); ComboBox.addItem("ComboBoxEquationSelector", "(A+B)/(34-8 H)=X", 0); // Make the controls visible, and therefor accessible, to the user. for (var index = 0 ; index < controls.length ; ++index) { var controlName = controls[index]; if (controlName == null) { break; } var theControl = document.getElementById(controlName); if (theControl != null) { theControl.style.visibility = "visible"; } } g_isCompletelyLoaded = true; }