/* delayedLoader - JS to delay out of sight pictures rendering Version : 2.0.2 Made by : Jean-Damien POGOLOTTI Last Update : 10/12/10 This file can be distributed under the license you can find at : http://www.pchart.net/license You can find the whole class documentation on the pChart web site. */ var PictureCache = new Array(); var PictureCount = 0; var WaitPicture = "wait.gif"; var DivClassName = "pChart"; var DefaultWidth = 70; var DefaultHeight = 230; var DefaultAlt = "pChart rendered picture"; /* Do the DOM document processing */ function loaderInit() { WindowSize = getWindowSize(); WindowHeight = WindowSize[1]; Offset = getScrollXY(); HeightOffset = Offset[1]; /* Enumerate the tags */ Links = document.getElementsByTagName("a"); for (i = 0; i < Links.length; i++) { className = Links[i].className; if ( className == DivClassName ) { ObjectWidth = Links[i].getAttribute("data-pchart-width"); ObjectHeight = Links[i].getAttribute("data-pchart-height"); ObjectID = Links[i].id; ObjectTop = Links[i].offsetTop; ObjectURL = Links[i].href; ObjectAlt = Links[i].getAttribute("data-pchart-alt"); if ( ObjectWidth == null ) { ObjectWidth = DefaultWidth; } if ( ObjectHeight == null ) { ObjectHeight = DefaultHeight; } if ( ObjectAlt == null ) { ObjectAlt = DefaultAlt; } if (ObjectID == "") { ObjectID = "pChart-"+i; Links[i].id = ObjectID; } PictureCache[PictureCount] = new Array(); PictureCache[PictureCount][0] = ObjectID; PictureCache[PictureCount][1] = ObjectTop; PictureCache[PictureCount][2] = ObjectURL; PictureCache[PictureCount][3] = ObjectAlt; PictureCache[PictureCount][4] = ObjectWidth; PictureCache[PictureCount][5] = ObjectHeight; PictureCount++; } } /* Replace the tags by
ones and attach the loader */ for(i=0;i",i); if ( HeightOffset + WindowHeight > PictureCache[i][1] ) { triggerVisible(i); } } } /* Replace the contents of the delayed loading DIV */ function changeContent(html, id) { DivID = PictureCache[id][0]; document.getElementById(DivID).innerHTML = html; } /* Trigger the picture rendering when the pChart DIV became visible */ function triggerVisible(PictureID) { if ( !PictureCache[PictureID][6] == true ) { PictureCache[PictureID][6] = true; ajaxRender(PictureCache[PictureID][2],PictureID); } } /* Catch the navigator window scrolling event */ function scrollEvent() { WindowSize = getWindowSize(); WindowHeight = WindowSize[1]; Offset = getScrollXY(); HeightOffset = Offset[1]; for(i=0;i<=PictureCount-1;i++) { if ( HeightOffset + WindowHeight > PictureCache[i][1] ) { triggerVisible(i); } } } /* Cross browser X/Y window offset gatherer */ function getScrollXY() { var scrOfX = 0, scrOfY = 0; if( typeof( window.pageYOffset ) == 'number' ) { scrOfY = window.pageYOffset; scrOfX = window.pageXOffset; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { scrOfY = document.body.scrollTop; scrOfX = document.body.scrollLeft; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { scrOfY = document.documentElement.scrollTop; scrOfX = document.documentElement.scrollLeft; } return [ scrOfX, scrOfY ]; } /* Cross browser X/Y window size gatherer */ function getWindowSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } return [ myWidth, myHeight ]; } /* Cross browser alpha transparency changer */ function changeOpac(opacity, id) { DivID = PictureCache[id][0]; var object = document.getElementById(DivID).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; } /* Shade in-out function */ function opacity(id, opacStart, opacEnd, millisec) { var speed = Math.round(millisec / 100); var timer = 0; if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } else if(opacStart < opacEnd) { for(i = opacStart; i <= opacEnd; i++) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } } /* Start the loader */ function StartFade(PictureID) { Loader = new Image(); URL = PictureCache[PictureID][2]; Loader.src = URL; setTimeout("CheckLoadingStatus("+PictureID+")", 200); } /* check the picture loading status */ function CheckLoadingStatus(PictureID) { DivID = PictureCache[PictureID][0]; URL = PictureCache[PictureID][2]; Alt = PictureCache[PictureID][3]; if ( Loader.complete == true ) { changeOpac(0, PictureID); HTMLResult = "
"+Alt+"
"; document.getElementById(DivID).innerHTML = HTMLResult; opacity(PictureID,0,100,100); } else setTimeout("CheckLoadingStatus("+PictureID+")", 200); } /* Compute the pChart picture in background */ function ajaxRender(URL,PictureID) { var xmlhttp=false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } @end @*/ if (!xmlhttp && typeof XMLHttpRequest!='undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp=false; } } if (!xmlhttp && window.createRequest) { try { xmlhttp = window.createRequest(); } catch (e) { xmlhttp=false; } } xmlhttp.open("GET", URL,true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { StartFade(PictureID); } } xmlhttp.send(null) }