Fireworks JavaScript preloads explainedProducts affected
How image preloading works in Fireworks HTML code
When HTML code that contains Rollover, Swap Image or Toggle Group behaviors is exported from Fireworks, the JavaScript will include a preload function. This function will download images to the browser's local cache folder so they can be quickly called by these behaviors. Depending on the HTML style selected by the user, Fireworks will generate preload JavaScript that is compatible with the various HTML editors it supports. Careful examination of the HTML code reveals where the preload functions are located and where there may be a call to run the preload function later in the code. It is important that the user be aware that not only the preload function, but also the call that initializes the function are both important for preloads to work.
What to look for in the code
Every preload must be performed by a JavaScript action in the HTML called a FUNCTION. Functions contain the actual commands that tell the browser what to do when that particular function is called by an EVENT. Below are some examples of the JavaScript from Fireworks generated Generic, Dreamweaver 2, GoLive and FrontPage HTML.
Generic HTML- <head> tag:
if (document.images){ preload_r1_c1_F1 = new Image(108,36); preload_r1_c1_F1.src = "preload_r1_c1.gif"; preload_r1_c1_F2 = new Image(108,36); preload_r1_c1_F2.src = "preload_r1_c1_F2.gif"; preload_r1_c1_F3 = new Image(108,36); preload_r1_c1_F3.src = "preload_r1_c1_F3.gif"; preload_r1_c1_F4 = new Image(108,36); preload_r1_c1_F4.src = "preload_r1_c1_F4.gif"; preload_r3_c1_F1 = new Image(108,36); preload_r3_c1_F1.src = "preload_r3_c1.gif"; preload_r3_c1_F2 = new Image(108,36); preload_r3_c1_F2.src = "preload_r3_c1_F2.gif"; preload_r3_c1_F3 = new Image(108,36); preload_r3_c1_F3.src = "preload_r3_c1_F3.gif"; preload_r3_c1_F4 = new Image(108,36); preload_r3_c1_F4.src = "preload_r3_c1_F4.gif"; preload_r5_c1_F1 = new Image(108,36); preload_r5_c1_F1.src = "preload_r5_c1.gif"; preload_r5_c1_F2 = new Image(108,36); preload_r5_c1_F2.src = "preload_r5_c1_F2.gif"; preload_r5_c1_F3 = new Image(108,36); preload_r5_c1_F3.src = "preload_r5_c1_F3.gif"; preload_r5_c1_F4 = new Image(108,36); preload_r5_c1_F4.src = "preload_r5_c1_F4.gif"; preload_r7_c1_F1 = new Image(108,36); preload_r7_c1_F1.src = "preload_r7_c1.gif"; preload_r7_c1_F2 = new Image(108,36); preload_r7_c1_F2.src = "preload_r7_c1_F2.gif"; preload_r7_c1_F3 = new Image(108,36); preload_r7_c1_F3.src = "preload_r7_c1_F3.gif"; preload_r7_c1_F4 = new Image(108,36); preload_r7_c1_F4.src = "preload_r7_c1_F4.gif"; }
The "if (document.images)" statement queries the browser to see if it understands the preload function (document.images) and then tells the browser to download the images on the page. The list of images to preload that follow are called an ARRAY. All images in the document as well as those used in rollovers will be listed in the array. In the above example there are sixteen images. Notice that a variable is declared to be a new Image with an x,y pixel size, then the source (.src) is set to be the corresponding image file.
Dreamweaver 2 HTML- <head> tag:
function MM_preloadImages() { if (document.images) { var imgFiles = MM_preloadImages.arguments; if (document.preloadArray == null) { document.preloadArray = new Array(); } var i = document.preloadArray.length; with (document) { for (var j = 0; j < imgFiles.length; j++) { if (imgFiles[j].charAt(0) != "#") { document.preloadArray[i] = new Image(); document.preloadArray[i++].src = imgFiles[j]; } } } } }
In this case, the function MM_preloadImages is declared so that it can be called upon later in the HTML file. The variable for the image files (imgFiles) is set to MM_preloadImages.arguments which calls up the array which will be found later in the HTML file. This function is an example of modular code that can be used in conjunction with a separate call to run the function and the array as well.
Below is an example of the call (onLoad="MM_preloadIMages) to the function and the array that tells the function which files to preload--<body> tag:
<body onLoad="MM_preloadImages ('images/preload_r1_c1_F2.gif','#931560371110'); MM_preloadImages('images/preload_r1_c1_F4.gif', 'images/preload_r1_c1_F4.gif','#931560371111'); MM_preloadImages('images/preload_r3_c1_F2.gif', '#931560371112'); MM_preloadImages('images/preload_r3_c1_F4.gif', 'images/preload_r3_c1_F4.gif','#931560371113'); MM_preloadImages('images/preload_r5_c1_F2.gif', '#931560371114'); MM_preloadImages('images/preload_r5_c1_F4.gif', 'images/preload_r5_c1_F4.gif','#931560371115'); MM_preloadImages('images/preload_r7_c1_F2.gif', '#931560371116'); MM_preloadImages('images/preload_r7_c1_F4.gif', 'images/preload_r7_c1_F4.gif','#931560371117'); InitGrp('FwSimpleGroup');">
Note:The above code should appear all on one line with no breaks. Line breaks have been included to aid readability.
GoLive HTML:
function CSILoad(im, ar) { if (document.images) { CSIm[im] = new Object(); for (var i = 0; i < 3; i++) { if (ar[i] != "") { CSIm[im][i] = new Image(); CSIm[im][i].src = ar[i]; } else { CSIm[im][i] = 0; } } CSIm[im][3] = ar[3]; } }
The function here is named "CSILoad" and the array is found at the beginning and at then end of the JavaScript section:
function CSScriptInit() { CSILoad('preload_r1_c1',new Array(/*URL*/'images/preload_r1_c1.gif', /*URL*/'images/preload_r1_c1_f2.gif', /*URL*/'images/preload_r1_c1_f3.gif','')); CSILoad('preload_r3_c1',new Array(/*URL*/'images/preload_r3_c1.gif', /*URL*/'images/preload_r3_c1_f2.gif', /*URL*/'images/preload_r3_c1_f3.gif','')); CSILoad('preload_r5_c1',new Array(/*URL*/'images/preload_r5_c1.gif', /*URL*/'images/preload_r5_c1_f2.gif', /*URL*/'images/preload_r5_c1_f3.gif','')); CSILoad('preload_r7_c1',new Array(/*URL*/'images/preload_r7_c1.gif', /*URL*/'images/preload_r7_c1_f2.gif', /*URL*/'images/preload_r7_c1_f3.gif','')); CSAction(new Array('65683020')); CSAction(new Array('65683022')); CSAction(new Array('65683024')); CSAction(new Array('65683026')); }
and later in the file:
CSImages=new Array(); function CSPreloadImage(action) { if (document.images) { CSImages[CSImages.length] = new Image(); CSImages[CSImages.length - 1].src = action[1]; } } CSAct['65683020'] = new Array(CSPreloadImage,/*URL*/ 'images/preload_r1_c1_f3.gif'); CSAct['65683022'] = new Array(CSPreloadImage,/*URL*/ 'images/preload_r3_c1_f3.gif'); CSAct['65683024'] = new Array(CSPreloadImage,/*URL*/ 'images/preload_r5_c1_f3.gif'); CSAct['65683026'] = new Array(CSPreloadImage,/*URL*/ 'images/preload_r7_c1_f3.gif'); // --></script>
</csscriptdict>
<csactions><csaction name="65683020" outputclass="Preload Image" val0="images/preload_r1_c1_f3.gif"><csaction name="65683022" outputclass="Preload Image" val0="images/preload_r3_c1_f3.gif"><csaction name="65683024" outputclass="Preload Image" val0="images/preload_r5_c1_f3.gif"><csaction name="65683026" outputclass="Preload Image" val0="images/preload_r7_c1_f3.gif"></csactions><csactionitem name="65683020"></csactionitem><csactionitem name="65683022"></csactionitem><csactionitem name="65683024"></csactionitem><csactionitem name="65683026"></csactionitem></head><body >
Note:Line breaks have been included to aid readability.
Note:All of the above code was copied from the <head> tag with the exception of the last line containing the onload call to the function. The "onload" calls the function "CSScriptInit" to begin the preloading.
FrontPage HTML- <head> tag:
if (document.images) { preload_r1_c1_F1 = new Image(108,36); preload_r1_c1_F1.src = "images/preload_r1_c1.gif"; preload_r1_c1_F2 = new Image(108,36); preload_r1_c1_F2.src = "images/preload_r1_c1_F2.gif"; preload_r1_c1_F3 = new Image(108,36); preload_r1_c1_F3.src = "images/preload_r1_c1_F3.gif"; preload_r1_c1_F4 = new Image(108,36); preload_r1_c1_F4.src = "images/preload_r1_c1_F4.gif"; preload_r3_c1_F1 = new Image(108,36); preload_r3_c1_F1.src = "images/preload_r3_c1.gif"; preload_r3_c1_F2 = new Image(108,36); preload_r3_c1_F2.src = "images/preload_r3_c1_F2.gif"; preload_r3_c1_F3 = new Image(108,36); preload_r3_c1_F3.src = "images/preload_r3_c1_F3.gif"; preload_r3_c1_F4 = new Image(108,36); preload_r3_c1_F4.src = "images/preload_r3_c1_F4.gif"; preload_r5_c1_F1 = new Image(108,36); preload_r5_c1_F1.src = "images/preload_r5_c1.gif"; preload_r5_c1_F2 = new Image(108,36); preload_r5_c1_F2.src = "images/preload_r5_c1_F2.gif"; preload_r5_c1_F3 = new Image(108,36); preload_r5_c1_F3.src = "images/preload_r5_c1_F3.gif"; preload_r5_c1_F4 = new Image(108,36); preload_r5_c1_F4.src = "images/preload_r5_c1_F4.gif"; preload_r7_c1_F1 = new Image(108,36); preload_r7_c1_F1.src = "images/preload_r7_c1.gif"; preload_r7_c1_F2 = new Image(108,36); preload_r7_c1_F2.src = "images/preload_r7_c1_F2.gif"; preload_r7_c1_F3 = new Image(108,36); preload_r7_c1_F3.src = "images/preload_r7_c1_F3.gif"; preload_r7_c1_F4 = new Image(108,36); preload_r7_c1_F4.src = "images/preload_r7_c1_F4.gif"; }
As in the generic HTML, the "if (document.images)" statement queries the browser to see if it understands the preload function (document.images) and then tells the browser to download the images on the page.
Copying the code
Whenever copying JavaScript code and preload arrays to a different HTML document, carefully examine the code and make sure that no necessary preloads are missing. Notice that the Dreamweaver 2 call to the function and the array are both found in the <body> tag proper, and the GoLive code has the onload call to the function in the <body> tag.
For more information on copying and pasting Fireworks HTML code, see Need help when copying JavaScript from Fireworks to other applications? (TechNote 13205).
Doc ID
(tn_13966)
Last updated
2007-06-05
Products affected
