Browse files

1) Make the lazy initialization based on viewport optional, controlle…

…d by a -pie-lazy-init property, and turned off by default.

2) Optimize the case where an element has no CSS3 styling in its initial state, by preventing any queries to getBoundingClientRect which would invoke a reflow.
3) Fix positioning of the rendering element when there was initially no CSS3 rendering but it gained rendering on hover/class change/etc.
  • Loading branch information...
1 parent 39fcb88 commit 396ca2273f9b9816ebd12fb1a70cfee9b5b754d7 Jason Johnston committed Sep 6, 2010
Showing with 32 additions and 14 deletions.
  1. +8 −7 sources/BackgroundRenderer.js
  2. +16 −7 sources/Element.js
  3. +7 −0 sources/RendererBase.js
  4. +1 −0 sources/RootRenderer.js
View
15 sources/BackgroundRenderer.js
@@ -16,13 +16,11 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
},
isActive: function() {
- var si = this.styleInfos,
- bounds = this.boundsInfo.getBounds();
- return bounds.w && bounds.h && (
- si.borderImageInfo.isActive() ||
+ var si = this.styleInfos;
+ return si.borderImageInfo.isActive() ||
si.borderRadiusInfo.isActive() ||
si.backgroundInfo.isActive() ||
- ( si.boxShadowInfo.isActive() && si.boxShadowInfo.getProps().inset ) );
+ ( si.boxShadowInfo.isActive() && si.boxShadowInfo.getProps().inset );
},
updateSize: function() {
@@ -42,8 +40,11 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
* Draw the shapes
*/
draw: function() {
- this.drawBgColor();
- this.drawBgImages();
+ var bounds = this.boundsInfo.getBounds();
+ if( bounds.w && bounds.h ) {
+ this.drawBgColor();
+ this.drawBgImages();
+ }
},
/**
View
23 sources/Element.js
@@ -2,11 +2,12 @@
PIE.Element = (function() {
var wrappers = {},
+ lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
ignorePropertyNames = { 'background':1, 'bgColor':1 };
function Element( el ) {
var renderers,
- boundsInfo,
+ boundsInfo = new PIE.BoundsInfo( el ),
styleInfos,
ancestors,
initializing,
@@ -18,8 +19,9 @@ PIE.Element = (function() {
*/
function init() {
if( !initialized ) {
- var docEl = doc.documentElement || doc.body,
- rect,
+ var docEl,
+ bounds,
+ lazy = el.currentStyle.getAttribute( lazyInitCssProp ) === 'true',
rootRenderer;
// Force layout so move/resize events will fire. Set this as soon as possible to avoid layout changes
@@ -36,10 +38,11 @@ PIE.Element = (function() {
el.attachEvent( 'onmouseleave', mouseLeft );
}
- rect = el.getBoundingClientRect();
+ boundsInfo.lock();
- // Check if the element is in the viewport; if not, delay initialization
- if( rect.top > docEl.clientHeight || rect.left > docEl.clientWidth || rect.bottom < 0 || rect.right < 0 ) {
+ // If the -pie-lazy-init:true flag is set, check if the element is outside the viewport and if so, delay initialization
+ if( lazy && ( bounds = boundsInfo.getBounds() ) && ( docEl = doc.documentElement || doc.body ) &&
+ ( bounds.y > docEl.clientHeight || bounds.x > docEl.clientWidth || bounds.y + bounds.h < 0 || bounds.x + bounds.w < 0 ) ) {
if( !delayed ) {
delayed = 1;
PIE.OnScroll.observe( init );
@@ -50,7 +53,6 @@ PIE.Element = (function() {
PIE.OnScroll.unobserve( init );
// Create the style infos and renderers
- boundsInfo = new PIE.BoundsInfo( el );
styleInfos = {
backgroundInfo: new PIE.BackgroundStyleInfo( el ),
borderInfo: new PIE.BorderStyleInfo( el ),
@@ -84,6 +86,8 @@ PIE.Element = (function() {
// Trigger rendering
update();
}
+
+ boundsInfo.unlock();
}
}
@@ -137,6 +141,11 @@ PIE.Element = (function() {
boundsInfo.lock();
for( i = 0, len = renderers.length; i < len; i++ ) {
+ // Make sure position is synced if the element hasn't already been renderered.
+ // TODO this feels sloppy - look into merging propChanged and update functions
+ if( !renderers[i].isPositioned ) {
+ renderers[i].updatePos();
+ }
if( renderers[i].needsUpdate() ) {
toUpdate.push( renderers[i] );
}
View
7 sources/RendererBase.js
@@ -17,6 +17,12 @@ PIE.RendererBase = {
},
/**
+ * Flag indicating the element has already been positioned at least once.
+ * @type {boolean}
+ */
+ isPositioned: false,
+
+ /**
* Determine if the renderer needs to be updated
* @return {boolean}
*/
@@ -34,6 +40,7 @@ PIE.RendererBase = {
* Tell the renderer to update based on modified element position
*/
updatePos: function() {
+ this.isPositioned = true;
},
/**
View
1 sources/RootRenderer.js
@@ -49,6 +49,7 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
s.left = x;
s.top = y;
s.zIndex = el.currentStyle.position === 'static' ? -1 : el.currentStyle.zIndex;
+ this.isPositioned = true;
}
},

0 comments on commit 396ca22

Please sign in to comment.