Miscellaneous » Delayed rendering
<a class=‘pChart‘ href=‘draw.php?Seed=1‘ data-pchart-alt=‘Picture1‘ data-pchart-width=‘700‘ data-pchart-height=‘230‘>Picture 1</a>
The script will use the <A> class name to determine if it has to attach the delayed loader event to it. By default the class is named "pChart" and can only be applied to <A> elements. The following parameters can be passed :
href is the path to the pChart script that will render the picture.
data-pchart-alt is an alternate text that will be attached to the picture.
data-pchart-width is the width of the picture that will be rendered.
data-pchart-height is the height of the picture that will be rendered.
Only the href parameter is mandatory.
A callback is attached to the window.onscroll() event. When the user is scrolling down the page, this function is checking all the "pChart" objects, if one appears to be in the viewable area of the user browser it triggers the rendering event. I‘ve added some cosmetics including a waiting picture and some shade-in shade-out effects.
You‘ll have to place the delayedLoading.js and wait.gif at a place where they can be accessed by the users. (Those files are in the pChart package) In the HEAD section of your HTML file, add the JS file inclusion and the optional declaration of the CSS "pChart" class :
<body onscroll="scrollEvent();" onload="loaderInit();">
..then you just have to define your pictures :
<a class=‘pChart‘ href=‘draw.php?Seed=1‘ data-pchart-alt=‘Picture1‘ data-pchart-width=‘700‘ data-pchart-height=‘230‘>Picture 1</a> ..some text.. <a class=‘pChart‘ href=‘draw.php?Seed=2‘ data-pchart-alt=‘Picture2‘ data-pchart-width=‘700‘ data-pchart-height=‘230‘>Picture 2</a> ..some text.. <a class=‘pChart‘ href=‘draw.php?Seed=3‘ data-pchart-alt=‘Picture3‘ data-pchart-width=‘700‘ data-pchart-height=‘230‘>Picture 3</a>
Components used on this web site : Famfamfam icons has been made by Mark James, Rounded corners lite has been coded by Cameron Cooke and Tim Hutchison, SyntaxHighlighter has been written by Alex Gorbatchev. pChart and this web site have been created by Jean-Damien POGOLOTTI. This documentation contains 185 pages and 56 comments. 409 users have registered. This page has been rendered in 0,01 seconds. Wiki revision 1.37.