Contents
Login Register Wishes Forum About
Miscellaneous » Delayed rendering
Help topics
Latest updates
2174d  replaceImageMapTitle
2174d  replaceImageMapValues
2174d  createFunctionSerie
2174d  setAbsicssaPosition
2174d  negateValues
Toolbox
  Download as PDF
  Print this page
  Share this page
  Create an account
  Feed the updates!
Google AdSense
Delayed rendering

As the pChart library will include additional CPU load on your web fronted (assuming that your are rendering the pictures each time a visitor open the page), we‘ve created a javascript framework that allows you to trigger the picture rendering only if the picture element is displayed in the user browser. This feature can be really useful if you have long pages with multiple charts and want to reduce the frontend CPU peak generated by the client browser.

You‘ll find a live example of the feature in the examples/delayedLoader folder of the pChart library.


Script philosophy

To use this script, the JavaScript interpreter must be activated in the user web browser (this should be the case on todays web browsers). If Javascript isn‘t enabled, the pictures will appears as an HTML link and the user will need to click on it to see it. All the delayed pictures should be created as a <A> HTML element :

 <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.




Script installation

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 :

<head>
  <script src=‘delayedLoading.js‘ type="text/javascript"></script>
  <style>
     a.pChart { text-decoration: none; color: #6A6A6A; }
  </style>
</head>

In the BODY tag of your HTML page, attach the javascript events :

<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>

If you want to replace the loading picture, default width/height/alt, just edit the javascript file and modify the relevant global variable.
Last updated on 12/10/2010 
by Jean-Damien 
Linked resources
  There is no linked topic yet.
Community comments
Message from mathbr on 09/12/2010
In that case the image is not readable by search engines and on-javascript browsers. I would prefer to use an "a" tag that instead of a "div" one. The image is linked in the href attribute, alternative text is the content of the a tag, and the script still uses the class attribute to discover diagrams. At initialization, the script replaces the a by a div with loading image, and when required will actually load the image. With that, the diagram is accessible to all types of browsers.
In case you don‘t want that, would it be possible to at least replace the use of formatted id attribute by using a normal id and a data attribute? In my opinion it would more respect the semantics.
Small point, is it possible to put quotes around attribute values in documentation (class=pChart)?
© Copyrights
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.