diff --git a/intense.js b/intense.js index b2a8ced..3e464be 100644 --- a/intense.js +++ b/intense.js @@ -261,9 +261,12 @@ var Intense = (function() { function init( element ) { + if(hasClass(element, 'loading')) return; + var imageSource = element.getAttribute( 'data-image') || element.src; var title = element.getAttribute( 'data-title'); var caption = element.getAttribute( 'data-caption'); + addClass(element, 'loading'); var img = new Image(); img.onload = function() { @@ -274,6 +277,7 @@ var Intense = (function() { lockBody(); bindEvents(); loop(); + removeClass(element, 'loading'); } img.src = imageSource; @@ -331,9 +335,16 @@ var Intense = (function() { if( mouse.xCurr !== lastPosition ) { var position = parseFloat( currentPosition / containerDimensions.w ); position = overflowArea.x * position; - target.style[ 'webkitTransform' ] = 'translate3d(' + position + 'px, 0px, 0px)'; - target.style[ 'MozTransform' ] = 'translate3d(' + position + 'px, 0px, 0px)'; - target.style[ 'msTransform' ] = 'translate3d(' + position + 'px, 0px, 0px)'; + + if(has3d()) { + target.style[ 'webkitTransform' ] = 'translate3d(' + position + 'px, 0px, 0px)'; + target.style[ 'MozTransform' ] = 'translate3d(' + position + 'px, 0px, 0px)'; + target.style[ 'msTransform' ] = 'translate3d(' + position + 'px, 0px, 0px)'; + }else{ + target.style['webkitTransform'] = 'translate(' + position + 'px, 0px)'; + target.style['MozTransform'] = 'translate(' + position + 'px, 0px)'; + target.style['msTransform'] = 'translate(' + position + 'px, 0px)'; + } lastPosition = mouse.xCurr; } } else if ( horizontalOrientation === false ) { @@ -343,9 +354,16 @@ var Intense = (function() { if( mouse.yCurr !== lastPosition ) { var position = parseFloat( currentPosition / containerDimensions.h ); position = overflowArea.y * position; - target.style[ 'webkitTransform' ] = 'translate3d( 0px, ' + position + 'px, 0px)'; - target.style[ 'MozTransform' ] = 'translate3d( 0px, ' + position + 'px, 0px)'; - target.style[ 'msTransform' ] = 'translate3d( 0px, ' + position + 'px, 0px)'; + + if(has3d()) { + target.style[ 'webkitTransform' ] = 'translate3d( 0px, ' + position + 'px, 0px)'; + target.style[ 'MozTransform' ] = 'translate3d( 0px, ' + position + 'px, 0px)'; + target.style[ 'msTransform' ] = 'translate3d( 0px, ' + position + 'px, 0px)'; + }else{ + target.style['webkitTransform'] = 'translate( 0px, ' + position + 'px)'; + target.style['MozTransform'] = 'translate( 0px, ' + position + 'px)'; + target.style['msTransform'] = 'translate( 0px, ' + position + 'px)'; + } lastPosition = mouse.yCurr; } } @@ -368,4 +386,55 @@ var Intense = (function() { stop: stop }); + function hasClass(ele,cls) { + return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); + } + + function addClass(ele,cls) { + if (!hasClass(ele,cls)) ele.className += " "+cls; + } + + function removeClass(ele,cls) { + if (hasClass(ele,cls)) { + var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); + ele.className=ele.className.replace(reg,' ').trim(); + } + } + + function has3d() { + if (!window.getComputedStyle) { + return false; + } + + if(window.has3d !== undefined) return window.has3d; + + var el = document.createElement('p'), + has3d, + transforms = { + 'webkitTransform':'-webkit-transform', + 'OTransform':'-o-transform', + 'msTransform':'-ms-transform', + 'MozTransform':'-moz-transform', + 'transform':'transform' + }; + + // Add it to the body to get the computed style. + document.body.insertBefore(el, null); + + for (var t in transforms) { + if (el.style[t] !== undefined) { + el.style[t] = "translate3d(1px,1px,1px)"; + has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); + } + } + + document.body.removeChild(el); + + var has3dfinal = (has3d !== undefined && has3d.length > 0 && has3d !== "none"); + + window.has3d = has3dfinal; + + return has3dfinal; + } + })(); \ No newline at end of file diff --git a/intense.min.js b/intense.min.js index c6aa2a8..b31eeb3 100644 --- a/intense.min.js +++ b/intense.min.js @@ -1 +1 @@ -window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}(),window.cancelRequestAnimFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout}();var Intense=function(){"use strict";function e(e,n){for(var t in n)t in e||(e[t]=n[t]);return e}function n(e,n){for(var t in n)e.style[t]=n[t]}function t(e){var n=window.innerHeight/e.h;if(e.w*n>window.innerWidth)return{w:e.w*n,h:e.h*n,fit:!0};var t=window.innerWidth/e.w;return{w:e.w*t,h:e.h*t,fit:!1}}function i(e){var n;if(e.length)for(n=0;nwindow.innerWidth){return{w:e.w*t,h:e.h*t,fit:true}}else{var n=window.innerWidth/e.w;return{w:e.w*n,h:e.h*n,fit:false}}}function m(e){var t;if(e.length){for(t=0;t0&&t!=="none";window.has3d=i;return i}var e=27;var t={xCurr:0,yCurr:0,xDest:0,yDest:0};var n=true;var r;var i,s=0;var o,u;var a={w:0,h:0};var f;var l={w:0,h:0};var c={x:0,y:0};var h;return p(D,{resize:N,start:y,stop:b})}() \ No newline at end of file