Permalink
Browse files

lazy loading inheritance configuration added

  • Loading branch information...
1 parent 12962eb commit e47ce0bddc595f41546a65d57c2189d562ba8e4a @justinmarsan committed Mar 24, 2011
Showing with 43 additions and 5 deletions.
  1. +3 −0 README
  2. +7 −1 index.html
  3. +24 −4 js/render-functions.js
  4. +9 −0 less/layout.less
View
3 README
@@ -40,6 +40,9 @@ The Html page by default includes JQuery from Google CDN (version needs to be up
Lazy-functions.js is the important file here, it makes sure that the content of your Html files will be showed when needed. It's also contains an Interval, feel free to change the delay to whatever you want, default being to 5 secondes (5000ms). You can also disable to interval, this way the content will not be updated automatically if the user resizes his browser.
+By default the lazy loading will uncomment element inherently so in the Desktop version, the element loaded in the Tablet version will be loaded too. If you want to avoid this behavior, a variable have been added in render-functions.js (var inheritence), just turn it to off.
+
+
To-do
-----
View
8 index.html
@@ -24,7 +24,13 @@
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
<!-- Page -->
-
+ <!-- Tablet
+ <p>tablet lol</p>
+ -->
+
+ <!-- Desktop
+ <p>desktop haha</p>
+ -->
<!-- /Page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
View
28 js/render-functions.js
@@ -3,6 +3,9 @@ var loaded_sizes = new Array();
var last_width = $(window).width();
var width;
+// Configuration
+var inherit = true; //set to false if you don't want inherited loading.
+
//Initialization function
function renderInit(){
width = $(window).width();
@@ -16,8 +19,8 @@ var versions = {
hdtv: 1938
};
-//Set the rendering
-function render() {
+//Set the rendering wiht inherit = true;
+function inherit_render() {
if(width >= versions.tablet){
sizes.push('Tablet');
}
@@ -33,6 +36,23 @@ function render() {
renderFor(sizes);
}
+//Set the rendering wiht inherit = false;
+function specific_render() {
+ if(width >= versions.tablet){
+ sizes[0] = 'Tablet';
+ }
+ if(width >= versions.desktop){
+ sizes[0] = 'Desktop';
+ }
+ if(width >= versions.bigscreen){
+ sizes[0] = 'Bigscreen';
+ }
+ if(width >= versions.hdtv){
+ sizes[0] = 'Hdtv';
+ }
+ renderFor(sizes);
+}
+
function in_array(array, p_val) {
for(var i = 0, l = array.length; i < l; i++) {
if(array[i] == p_val) {
@@ -58,7 +78,7 @@ function showContent(){
renderInit();
if(width != last_width) {
last_width = width;
- render();
+ (inherit == true) ? inherit_render() : specific_render();
}
}
@@ -68,5 +88,5 @@ var renderInterval = setInterval("showContent()",1000);
//Show the content
renderInit();
-render();
+(inherit == true) ? inherit_render() : specific_render();
last_width = width;
View
9 less/layout.less
@@ -11,6 +11,15 @@
margin-left:10px;
}
+/* .col(x) writes width, margin-left and margin-right for x as the number of columns */
+.p-col(@number: 1) {
+ @columns : 26%*@number;
+ @glitter : 7%*(@number - 1);
+ width: @columns+@glitter;
+ margin-right:3.5%;
+ margin-left:3.5%;
+}
+
/* .col-padding(x) writes width, margin-left, margin-right, padding-left and padding-right for x as the number of columns */
.col-padding(@number: 1) {
@columns : 76px*@number;

0 comments on commit e47ce0b

Please sign in to comment.