Rendering not appearing until page load
24 views
Skip to first unread message
goo...@petskink.net
May 11, 2009, 5:43:42 PM5/11/09
to google-excanvas
I have been playing around with some improvements to user-perception
of page loading time, and have found that the canvas element that I
have on the page is not showing its rendering until all items on the
page have been loaded.
What I see:
The script that draws the image on the canvas is run early on, and the
'Loading...' message disappears. Then I have to wait for while until
I see any drawing. I added in a very slow image to the bottom of the
page to make sure of what I was seeing.
I am using canvas as an element on the page like:
<div class="traffic_chart" id="people_on_site">
<canvas id="cav" width="215" height="45">Loading...</canvas>
</div>
<script type="text/javascript">
if (BCNTRY.init_vstat) {
alert ('init_vstat');
BCNTRY.init_vstat();
alert('init_vstat done');
}
</script>
The two alerts (for debugging) appear very early in the page load. On
FF and Chrome, the rendering onto the canvas element happens
immediately after the second alert.
The javascript looks something like:
var canvases = this.element.getElementsByTagName('canvas');
if (canvases) {
this.canvas = canvases[0];
if (typeof G_vmlCanvasManager != 'undefined') {
G_vmlCanvasManager.initElement(this.canvas);
}
if (this.canvas.getContext) {
this.ctx=this.canvas.getContext('2d');
//alert('got context');
}
else {
alert('could not get context from
'+this.canvas.id.toString()+' getContext: '+this.canvas.getContext);
//this.init_context();
}
}
Any way to make the canvas drawing appear earlier?
of page loading time, and have found that the canvas element that I
have on the page is not showing its rendering until all items on the
page have been loaded.
What I see:
The script that draws the image on the canvas is run early on, and the
'Loading...' message disappears. Then I have to wait for while until
I see any drawing. I added in a very slow image to the bottom of the
page to make sure of what I was seeing.
I am using canvas as an element on the page like:
<div class="traffic_chart" id="people_on_site">
<canvas id="cav" width="215" height="45">Loading...</canvas>
</div>
<script type="text/javascript">
if (BCNTRY.init_vstat) {
alert ('init_vstat');
BCNTRY.init_vstat();
alert('init_vstat done');
}
</script>
The two alerts (for debugging) appear very early in the page load. On
FF and Chrome, the rendering onto the canvas element happens
immediately after the second alert.
The javascript looks something like:
var canvases = this.element.getElementsByTagName('canvas');
if (canvases) {
this.canvas = canvases[0];
if (typeof G_vmlCanvasManager != 'undefined') {
G_vmlCanvasManager.initElement(this.canvas);
}
if (this.canvas.getContext) {
this.ctx=this.canvas.getContext('2d');
//alert('got context');
}
else {
alert('could not get context from
'+this.canvas.id.toString()+' getContext: '+this.canvas.getContext);
//this.init_context();
}
}
Any way to make the canvas drawing appear earlier?
Fabien
May 12, 2009, 3:42:28 AM5/12/09
to google-excanvas
Hello, yes you can make it appear earlier, but this is not exCanvas
which is slow, this is the event that fires it's drawing.
The fastest event possible to draw on a canvas is the "DOM ready" (or
"DOM loaded") event which is fired when the dom is loaded, even if the
images are not. There are many scripts that can fire this event, like
http://code.google.com/p/domready/
which is slow, this is the event that fires it's drawing.
The fastest event possible to draw on a canvas is the "DOM ready" (or
"DOM loaded") event which is fired when the dom is loaded, even if the
images are not. There are many scripts that can fire this event, like
http://code.google.com/p/domready/
goo...@petskink.net
May 12, 2009, 12:58:07 PM5/12/09
to google-excanvas
Fabien,
Do you have an example where the canvas element is rendered
onDOMReady? My (limited) research has only found the rendering to be
coincidental with onLoad.
On May 12, 1:42 am, Fabien <phenxdes...@gmail.com> wrote:
> Hello, yes you can make it appear earlier, but this is not exCanvas
> which is slow, this is the event that fires it's drawing.
> The fastest event possible to draw on a canvas is the "DOM ready" (or
> "DOM loaded") event which is fired when the dom is loaded, even if the
> images are not. There are many scripts that can fire this event, likehttp://code.google.com/p/domready/
Do you have an example where the canvas element is rendered
onDOMReady? My (limited) research has only found the rendering to be
coincidental with onLoad.
On May 12, 1:42 am, Fabien <phenxdes...@gmail.com> wrote:
> Hello, yes you can make it appear earlier, but this is not exCanvas
> which is slow, this is the event that fires it's drawing.
> The fastest event possible to draw on a canvas is the "DOM ready" (or
> "DOM loaded") event which is fired when the dom is loaded, even if the
Fabien Ménager
May 12, 2009, 1:11:28 PM5/12/09
to google-excanvas
Of course, all the examples that are here :
http://phenxdesign.net/projects/flotr/examples/prototype/index.html
where Prototype.js is used to fire this event and draw the graphs.
http://phenxdesign.net/projects/flotr/examples/prototype/index.html
where Prototype.js is used to fire this event and draw the graphs.
goo...@petskink.net
May 13, 2009, 1:01:09 AM5/13/09
to google-excanvas
Fabien,
It seems to me that the problems that I am experiencing come from the
version of excanvas.js that I am using. I am using the version
downloaded off the Google Code page, while the version that is used in
the example you gave me is different.
I cannot see any version information in the javascript files. What
version is used in your example? Has there been a patch applied since
version 3?
Thanks,
Brendan Gibson
It seems to me that the problems that I am experiencing come from the
version of excanvas.js that I am using. I am using the version
downloaded off the Google Code page, while the version that is used in
the example you gave me is different.
I cannot see any version information in the javascript files. What
version is used in your example? Has there been a patch applied since
version 3?
Thanks,
Brendan Gibson
Fabien Ménager
May 13, 2009, 3:29:42 AM5/13/09
to google-excanvas
In the example I gave you, this is this version of exCanvas :
http://code.google.com/p/explorercanvas/source/browse/trunk/excanvas.js
It is a developer version, not released, but everyone can use it.
I really don't think the problem you encounter comes from this
version, I suggest you to include the prototype.js library (
http://www.prototypejs.org/download ) in your script and use this :
document.observe("dom:loaded", function(){
/// your stuff here
});
http://code.google.com/p/explorercanvas/source/browse/trunk/excanvas.js
It is a developer version, not released, but everyone can use it.
I really don't think the problem you encounter comes from this
version, I suggest you to include the prototype.js library (
http://www.prototypejs.org/download ) in your script and use this :
document.observe("dom:loaded", function(){
/// your stuff here
});
Aseem Kishore
May 13, 2009, 3:40:40 AM5/13/09
to google-...@googlegroups.com
You could also simply execute the script directly after the relevant parts of your HTML.
<head>
...
<script src="excanvas.js"></script>
</head>
<body>
...
<canvas ...></canvas>
<script>
// init the canvas here
</script>
...
</body>
I use this technique on many of my sites and it's really guaranteed to be the earliest possible execution. And you don't have to rely on (what I've found to often be buggy in IE8) dom:ready tricks, which are super complicated and contain many hacks.
This also seems to be what Yahoo! recommends as a best practice, and I consider them a very credible source of information. Nate Koechley also recommended this technique (on a finer grained level, so e.g. executing a script for each widget right after that widget's HTML) at MIX recently.
Good luck!
Aseem
Reply all
Reply to author
Forward
0 new messages