diff --git a/doc/General/Credits.md b/doc/General/Credits.md index dbc4d03ca9..513b416d43 100644 --- a/doc/General/Credits.md +++ b/doc/General/Credits.md @@ -30,6 +30,12 @@ LibreNMS ships with the following software components: Mark Gibbons Initial code base submited via PR721 +- Jquery LazyLoad + http://www.appelsiini.net/projects/lazyload + Mika Tuupola (@tuupola on github) + MIT License + + Other components (needs details filled in): - JpGraph (html/includes/jpgraph): QPL 1.0 license diff --git a/html/includes/functions.inc.php b/html/includes/functions.inc.php index 0b62367cf0..aa83aca1f3 100644 --- a/html/includes/functions.inc.php +++ b/html/includes/functions.inc.php @@ -256,7 +256,7 @@ function overlib_link($url, $text, $contents, $class) { $output .= '>'; } else { - $output .= " onmouseover=\"return overlib('".$contents."'".$config['overlib_defaults'].', WRAP,HAUTO,VAUTO);" onmouseout="return nd();">'; + $output .= " onmouseover=\"return overlib('".$contents."'".$config['overlib_defaults'].",WRAP,HAUTO,VAUTO); \" onmouseout=\"return nd();\">"; } $output .= $text.''; @@ -430,6 +430,26 @@ function generate_graph_tag($args) { }//end generate_graph_tag() +function generate_lazy_graph_tag($args) { + $urlargs = array(); + $w = 0; + $h = 0; + foreach ($args as $key => $arg) { + switch (strtolower($key)) { + case 'width': + $w = $arg; + break; + case 'height': + $h = $arg; + break; + } + $urlargs[] = $key."=".urlencode($arg); + } + + return ''; + +}//end generate_lazy_graph_tag() + function generate_graph_js_state($args) { // we are going to assume we know roughly what the graph url looks like here. diff --git a/html/includes/print-graphrow.inc.php b/html/includes/print-graphrow.inc.php index db451315f0..2ee411551a 100644 --- a/html/includes/print-graphrow.inc.php +++ b/html/includes/print-graphrow.inc.php @@ -52,9 +52,9 @@ foreach ($periods as $period) { $link = generate_url($link_array); if ($return_data === true) { - $graph_data[] = overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), null); + $graph_data[] = overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL); } else { - echo overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), null); + echo(overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL)); } } diff --git a/html/includes/table/mempool.inc.php b/html/includes/table/mempool.inc.php index 2afb80edc0..ce8193504a 100644 --- a/html/includes/table/mempool.inc.php +++ b/html/includes/table/mempool.inc.php @@ -49,7 +49,7 @@ foreach (dbFetchRows($sql, $param) as $mempool) { $graph_array_zoom['height'] = '150'; $graph_array_zoom['width'] = '400'; $link = 'graphs/id='.$graph_array['id'].'/type='.$graph_array['type'].'/from='.$graph_array['from'].'/to='.$graph_array['to'].'/'; - $mini_graph = overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), null); + $mini_graph = overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL); $background = get_percentage_colours($perc); $bar_link = overlib_link($link, print_percentage_bar(400, 20, $perc, "$used / $total", 'ffffff', $background['left'], $free, 'ffffff', $background['right']), generate_graph_tag($graph_array_zoom), null); diff --git a/html/includes/table/processor.inc.php b/html/includes/table/processor.inc.php index bcedd6196f..42ad7344c8 100644 --- a/html/includes/table/processor.inc.php +++ b/html/includes/table/processor.inc.php @@ -46,7 +46,7 @@ foreach (dbFetchRows($sql, $param) as $processor) { $graph_array_zoom['height'] = '150'; $graph_array_zoom['width'] = '400'; $link = 'graphs/id='.$graph_array['id'].'/type='.$graph_array['type'].'/from='.$graph_array['from'].'/to='.$graph_array['to'].'/'; - $mini_graph = overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), null); + $mini_graph = overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL); $background = get_percentage_colours($perc); $bar_link = overlib_link($link, print_percentage_bar(400, 20, $perc, $perc.'%', 'ffffff', $background['left'], (100 - $perc).'%', 'ffffff', $background['right']), generate_graph_tag($graph_array_zoom), null); diff --git a/html/includes/table/storage.inc.php b/html/includes/table/storage.inc.php index 3d301456f0..6236ff8929 100644 --- a/html/includes/table/storage.inc.php +++ b/html/includes/table/storage.inc.php @@ -58,7 +58,7 @@ foreach (dbFetchRows($sql, $param) as $drive) { $graph_array_zoom['height'] = '150'; $graph_array_zoom['width'] = '400'; $link = 'graphs/id='.$graph_array['id'].'/type='.$graph_array['type'].'/from='.$graph_array['from'].'/to='.$graph_array['to'].'/'; - $mini_graph = overlib_link($link, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), null); + $mini_graph = overlib_link($link, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL); $background = get_percentage_colours($perc); $bar_link = overlib_link($link, print_percentage_bar(400, 20, $perc, "$used / $total", 'ffffff', $background['left'], $free, 'ffffff', $background['right']), generate_graph_tag($graph_array_zoom), null); diff --git a/html/index.php b/html/index.php index a3de9ba0c5..9dc7a454ad 100644 --- a/html/index.php +++ b/html/index.php @@ -155,6 +155,8 @@ else { + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+

Plugin disabled

+

+ All images are loaded. Page takes long time to load. Shift-reload to test again. + But wait there is more! You can also lazy load sideways or + gazillion images. +

+ + BMW M1 Hood
+ BMW M1 Side
+ Viper 1
+ Viper Corner
+ BMW M3 GT
+ Corvette Pitstop
+ +
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + diff --git a/lib/jquery_lazyload/enabled.html b/lib/jquery_lazyload/enabled.html new file mode 100644 index 0000000000..5737a7ab86 --- /dev/null +++ b/lib/jquery_lazyload/enabled.html @@ -0,0 +1,123 @@ + + + + + + Lazy Load Enabled + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Plugin enabled

+

+ Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down + they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page + where plugin is disabled, same page with + fadein effect, page with wide + layout or wide content inside container. +

+ + 
$("img.lazy").lazyload();
+ 
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
+ +
+ BMW M1 Hood
+ BMW M1 Side
+ Viper 1
+ Viper Corner
+ BMW M3 GT
+ Corvette Pitstop
+
+
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + diff --git a/lib/jquery_lazyload/enabled_ajax.html b/lib/jquery_lazyload/enabled_ajax.html new file mode 100644 index 0000000000..607edb12c6 --- /dev/null +++ b/lib/jquery_lazyload/enabled_ajax.html @@ -0,0 +1,126 @@ + + + + + + Lazy Load Enabled With AJAX Content + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Plugin enabled with AJAX loaded content

+

+ Images are loaded via AJAX(H) call after you click the container. Lazy Load + is applied in the callback. +

+ 
+ $("#container").one("click", function() {
+     $("#container").load("images.html", function(response, status, xhr) {
+         $("img.lazy").lazyload();
+     });              
+ });
+ 
 <img class="lazy" data-original="img/example.jpg" width="765" height="574">
+
+ Click me to load content... +
+ +
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + + + + diff --git a/lib/jquery_lazyload/enabled_background.html b/lib/jquery_lazyload/enabled_background.html new file mode 100644 index 0000000000..1149dc84e5 --- /dev/null +++ b/lib/jquery_lazyload/enabled_background.html @@ -0,0 +1,123 @@ + + + + + + Lazy Load Enabled With CSS Background Images + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Plugin enabled on css background images with fadein effect

+

+ Here be dragons. +

+ 
+  <div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>
+
+  $("div.lazy").lazyload({
+      effect : "fadeIn"
+  });
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/lib/jquery_lazyload/enabled_container.html b/lib/jquery_lazyload/enabled_container.html new file mode 100644 index 0000000000..e2ae4999e2 --- /dev/null +++ b/lib/jquery_lazyload/enabled_container.html @@ -0,0 +1,136 @@ + + + + + + Lazy Load Enabled on Container + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Plugin enabled on container

+

+ Images below the visible area (the ones lower than container bottom) are not loaded. When scrolling down + they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page where plugin is + disabled or same page with fadein effect. +

+ 
+$("img.lazy").lazyload({         
+    effect : "fadeIn",
+    container: $("#container")
+});
+
+ 
+#container {
+    height: 600px;
+    overflow: scroll;
+}
+
+ 
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
+
+ BMW M1 Hood
+ BMW M1 Side
+ Viper 1
+ Viper Corner
+ BMW M3 GT
+ Corvette Pitstop
+
+ +
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + diff --git a/lib/jquery_lazyload/enabled_fadein.html b/lib/jquery_lazyload/enabled_fadein.html new file mode 100644 index 0000000000..6d28e4949a --- /dev/null +++ b/lib/jquery_lazyload/enabled_fadein.html @@ -0,0 +1,128 @@ + + + + + + Lazy Load Enabled With FadeIn Effect + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Plugin enabled with fadein effect

+

+ Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down + they are loaded when needed. Images appear using fadeIn + effect. Empty cache and shift-reload to test again. Compare this to page where plugin is + without effects. +

+ 
+$("img.lazy").lazyload({
+    effect : "fadeIn"
+});
+
+ 
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
+
+ BMW M1 Hood
+ BMW M1 Side
+ Viper 1
+ Viper Corner
+ BMW M3 GT
+ Corvette Pitstop
+
+ +
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + diff --git a/lib/jquery_lazyload/enabled_gazillion.html b/lib/jquery_lazyload/enabled_gazillion.html new file mode 100644 index 0000000000..dc33bad320 --- /dev/null +++ b/lib/jquery_lazyload/enabled_gazillion.html @@ -0,0 +1,283 @@ + + + + + + Lazy Load Enabled With Gazillion Images + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Plugin enabled with gazillion images

+

+ When you have hundreds of images it is best to use James Padolseys scrollstop event. + Compate this to page where plugin is disabled or page with + larger images. +

+ + 
<script src="jquery.scrollstop.js" type="text/javascript"></script>
+ 
<img class="lazy" data-original="img/example.jpg" width="80" height="120" alt="">
+ 
$("img.lazy").lazyload({
+  event: "scrollstop"
+});
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/lib/jquery_lazyload/enabled_noscript.html b/lib/jquery_lazyload/enabled_noscript.html new file mode 100644 index 0000000000..1906de9121 --- /dev/null +++ b/lib/jquery_lazyload/enabled_noscript.html @@ -0,0 +1,144 @@ + + + + + + Lazy Load Enabled With Noscript Fallback + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Plugin enabled with noscript fallback

+

+ This page deprecates gracefully for non JavaScript browsers. It requires hiding + lazy loaded images with css and adding a <noscript> block which contains + the real image and it is shown when JavaScript is not enabled. If JavaScript is enabled + show() function is called before initializing Lazy Load plugin. +

+ + 
.lazy {
+    display: none;
+}
+ + 
$("img.lazy").show().lazyload({
+    effect : "fadeIn"
+});
+ + 
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574">
+     <noscript><img src="img/example.jpg" width="765" height="574"></noscript>
+ + BMW M1 Hood
+ BMW M1 Side
+ Viper 1
+ Viper Corner
+ BMW M3 GT
+ Corvette Pitstop
+ + + +
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/lib/jquery_lazyload/enabled_timeout.html b/lib/jquery_lazyload/enabled_timeout.html new file mode 100644 index 0000000000..07998ef8ac --- /dev/null +++ b/lib/jquery_lazyload/enabled_timeout.html @@ -0,0 +1,135 @@ + + + + + + Lazy Load Images After 5 Second Timeout + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Load images after five second delay

+

+ Here Lazy Load + plugin is enabled. Images below the fold are not loaded. Timeout will trigger five seconds after + all other elements of page have been loaded. +

+ 
$(function() {
+    $("img.lazy").lazyload({
+        event : "sporty"
+    });
+});
+
+$(window).bind("load", function() {
+    var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);
+});
+ + 
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574">
+ +
+ BMW M1 Hood
+ BMW M1 Side
+ Viper 1
+ Viper Corner
+ BMW M3 GT
+ Corvette Pitstop
+
+ +
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + diff --git a/lib/jquery_lazyload/enabled_wide.html b/lib/jquery_lazyload/enabled_wide.html new file mode 100644 index 0000000000..5020e2f55c --- /dev/null +++ b/lib/jquery_lazyload/enabled_wide.html @@ -0,0 +1,126 @@ + + + + + + Lazy Load Enabled + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Plugin enabled

+

+ Images right of the fold are not loaded. When scrolling left they are loaded when needed. + Shift-reload to test again. Compare this to page where plugin is + disabled or page with + gazillion images. +

+ 
$("img.lazy").lazyload({
+    effect: "fadeIn"
+});
+ 
<img class="lazy" data-original="img/example.jpg" width="765" height="574">
+ + BMW M1 Hood + BMW M1 Side + Viper 1 + Viper Corner + BMW M3 GT + Corvette Pitstop + +
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/lib/jquery_lazyload/enabled_wide_container.html b/lib/jquery_lazyload/enabled_wide_container.html new file mode 100644 index 0000000000..c93b68be15 --- /dev/null +++ b/lib/jquery_lazyload/enabled_wide_container.html @@ -0,0 +1,134 @@ + + + + + + Lazy Load Enabled on Horizontal Container + + + + + + + + + + +
+
+
+

Lazy Load Plugin for jQuery

+ Blog + Projects +
+
+ + +
+
+
+
+ +
+
+ +

Plugin enabled on horizontal container

+

+ Images right of the visible area are not loaded. When scrolling left they are loaded when needed. + Shift-reload to test again. Compare this to page where plugin is + disabled or page with + gazillion images. +

+ 
$("img.lazy").lazyload({
+    container: $("#container")
+});
+
+
+ BMW M1 Hood + BMW M1 Side + Viper 1 + Viper Corner + BMW M3 GT + Corvette Pitstop +
+
+ +
+
+ +
+
+
+
+
CATEGORIES
+ +
+
+
PROJECTS
+ +
+
+
ABOUT
+ +
+
+ Built using the awesome Flat UI Pro framework by Designmodo. +

+ © 2013 Mika Tuupola. +
+
+
+
+ + + + + + + + diff --git a/lib/jquery_lazyload/img/bmw_m1_hood.jpg b/lib/jquery_lazyload/img/bmw_m1_hood.jpg new file mode 100644 index 0000000000..d9246a9dbc Binary files /dev/null and b/lib/jquery_lazyload/img/bmw_m1_hood.jpg differ diff --git a/lib/jquery_lazyload/img/bmw_m1_side.jpg b/lib/jquery_lazyload/img/bmw_m1_side.jpg new file mode 100644 index 0000000000..67559a1036 Binary files /dev/null and b/lib/jquery_lazyload/img/bmw_m1_side.jpg differ diff --git a/lib/jquery_lazyload/img/bmw_m3_gt.jpg b/lib/jquery_lazyload/img/bmw_m3_gt.jpg new file mode 100644 index 0000000000..2c471ea241 Binary files /dev/null and b/lib/jquery_lazyload/img/bmw_m3_gt.jpg differ diff --git a/lib/jquery_lazyload/img/corvette_pitstop.jpg b/lib/jquery_lazyload/img/corvette_pitstop.jpg new file mode 100644 index 0000000000..d6653f4803 Binary files /dev/null and b/lib/jquery_lazyload/img/corvette_pitstop.jpg differ diff --git a/lib/jquery_lazyload/img/grey.gif b/lib/jquery_lazyload/img/grey.gif new file mode 100644 index 0000000000..8d74456e3d Binary files /dev/null and b/lib/jquery_lazyload/img/grey.gif differ diff --git a/lib/jquery_lazyload/img/transparent.gif b/lib/jquery_lazyload/img/transparent.gif new file mode 100644 index 0000000000..35d42e808f Binary files /dev/null and b/lib/jquery_lazyload/img/transparent.gif differ diff --git a/lib/jquery_lazyload/img/viper_1.jpg b/lib/jquery_lazyload/img/viper_1.jpg new file mode 100644 index 0000000000..41a3df95a1 Binary files /dev/null and b/lib/jquery_lazyload/img/viper_1.jpg differ diff --git a/lib/jquery_lazyload/img/viper_corner.jpg b/lib/jquery_lazyload/img/viper_corner.jpg new file mode 100644 index 0000000000..1d9bb84a3f Binary files /dev/null and b/lib/jquery_lazyload/img/viper_corner.jpg differ diff --git a/lib/jquery_lazyload/img/white.gif b/lib/jquery_lazyload/img/white.gif new file mode 100644 index 0000000000..2799b45c65 Binary files /dev/null and b/lib/jquery_lazyload/img/white.gif differ diff --git a/lib/jquery_lazyload/jquery.lazyload.js b/lib/jquery_lazyload/jquery.lazyload.js new file mode 100644 index 0000000000..26fab660ae --- /dev/null +++ b/lib/jquery_lazyload/jquery.lazyload.js @@ -0,0 +1,242 @@ +/*! + * Lazy Load - jQuery plugin for lazy loading images + * + * Copyright (c) 2007-2015 Mika Tuupola + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + * Project home: + * http://www.appelsiini.net/projects/lazyload + * + * Version: 1.9.5 + * + */ + +(function($, window, document, undefined) { + var $window = $(window); + + $.fn.lazyload = function(options) { + var elements = this; + var $container; + var settings = { + threshold : 0, + failure_limit : 0, + event : "scroll", + effect : "show", + container : window, + data_attribute : "original", + skip_invisible : false, + appear : null, + load : null, + placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" + }; + + function update() { + var counter = 0; + + elements.each(function() { + var $this = $(this); + if (settings.skip_invisible && !$this.is(":visible")) { + return; + } + if ($.abovethetop(this, settings) || + $.leftofbegin(this, settings)) { + /* Nothing. */ + } else if (!$.belowthefold(this, settings) && + !$.rightoffold(this, settings)) { + $this.trigger("appear"); + /* if we found an image we'll load, reset the counter */ + counter = 0; + } else { + if (++counter > settings.failure_limit) { + return false; + } + } + }); + + } + + if(options) { + /* Maintain BC for a couple of versions. */ + if (undefined !== options.failurelimit) { + options.failure_limit = options.failurelimit; + delete options.failurelimit; + } + if (undefined !== options.effectspeed) { + options.effect_speed = options.effectspeed; + delete options.effectspeed; + } + + $.extend(settings, options); + } + + /* Cache container as jQuery as object. */ + $container = (settings.container === undefined || + settings.container === window) ? $window : $(settings.container); + + /* Fire one scroll event per scroll. Not one scroll event per image. */ + if (0 === settings.event.indexOf("scroll")) { + $container.bind(settings.event, function() { + return update(); + }); + } + + this.each(function() { + var self = this; + var $self = $(self); + + self.loaded = false; + + /* If no src attribute given use data:uri. */ + if ($self.attr("src") === undefined || $self.attr("src") === false) { + if ($self.is("img")) { + $self.attr("src", settings.placeholder); + } + } + + /* When appear is triggered load original image. */ + $self.one("appear", function() { + if (!this.loaded) { + if (settings.appear) { + var elements_left = elements.length; + settings.appear.call(self, elements_left, settings); + } + $("") + .bind("load", function() { + + var original = $self.attr("data-" + settings.data_attribute); + $self.hide(); + if ($self.is("img")) { + $self.attr("src", original); + } else { + $self.css("background-image", "url('" + original + "')"); + } + $self[settings.effect](settings.effect_speed); + + self.loaded = true; + + /* Remove image from array so it is not looped next time. */ + var temp = $.grep(elements, function(element) { + return !element.loaded; + }); + elements = $(temp); + + if (settings.load) { + var elements_left = elements.length; + settings.load.call(self, elements_left, settings); + } + }) + .attr("src", $self.attr("data-" + settings.data_attribute)); + } + }); + + /* When wanted event is triggered load original image */ + /* by triggering appear. */ + if (0 !== settings.event.indexOf("scroll")) { + $self.bind(settings.event, function() { + if (!self.loaded) { + $self.trigger("appear"); + } + }); + } + }); + + /* Check if something appears when window is resized. */ + $window.bind("resize", function() { + update(); + }); + + /* With IOS5 force loading images when navigating with back button. */ + /* Non optimal workaround. */ + if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { + $window.bind("pageshow", function(event) { + if (event.originalEvent && event.originalEvent.persisted) { + elements.each(function() { + $(this).trigger("appear"); + }); + } + }); + } + + /* Force initial check if images should appear. */ + $(document).ready(function() { + update(); + }); + + return this; + }; + + /* Convenience methods in jQuery namespace. */ + /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ + + $.belowthefold = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop(); + } else { + fold = $(settings.container).offset().top + $(settings.container).height(); + } + + return fold <= $(element).offset().top - settings.threshold; + }; + + $.rightoffold = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.width() + $window.scrollLeft(); + } else { + fold = $(settings.container).offset().left + $(settings.container).width(); + } + + return fold <= $(element).offset().left - settings.threshold; + }; + + $.abovethetop = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.scrollTop(); + } else { + fold = $(settings.container).offset().top; + } + + return fold >= $(element).offset().top + settings.threshold + $(element).height(); + }; + + $.leftofbegin = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.scrollLeft(); + } else { + fold = $(settings.container).offset().left; + } + + return fold >= $(element).offset().left + settings.threshold + $(element).width(); + }; + + $.inviewport = function(element, settings) { + return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) && + !$.belowthefold(element, settings) && !$.abovethetop(element, settings); + }; + + /* Custom selectors for your convenience. */ + /* Use as $("img:below-the-fold").something() or */ + /* $("img").filter(":below-the-fold").something() which is faster */ + + $.extend($.expr[":"], { + "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); }, + "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, + "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); }, + "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); }, + "in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); }, + /* Maintain BC for couple of versions. */ + "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, + "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); }, + "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); } + }); + +})(jQuery, window, document); diff --git a/lib/jquery_lazyload/jquery.lazyload.min.js b/lib/jquery_lazyload/jquery.lazyload.min.js new file mode 100644 index 0000000000..575abfb2b4 --- /dev/null +++ b/lib/jquery_lazyload/jquery.lazyload.min.js @@ -0,0 +1,2 @@ +/*! Lazy Load 1.9.5 - MIT license - Copyright 2010-2015 Mika Tuupola */ +!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!1,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document); \ No newline at end of file diff --git a/lib/jquery_lazyload/jquery.scrollstop.js b/lib/jquery_lazyload/jquery.scrollstop.js new file mode 100644 index 0000000000..a0bb637100 --- /dev/null +++ b/lib/jquery_lazyload/jquery.scrollstop.js @@ -0,0 +1,72 @@ +/* http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ */ + +(function(){ + + var special = jQuery.event.special, + uid1 = "D" + (+new Date()), + uid2 = "D" + (+new Date() + 1); + + special.scrollstart = { + setup: function() { + + var timer, + handler = function(evt) { + + var _self = this, + _args = arguments; + + if (timer) { + clearTimeout(timer); + } else { + evt.type = "scrollstart"; + jQuery.event.dispatch.apply(_self, _args); + } + + timer = setTimeout( function(){ + timer = null; + }, special.scrollstop.latency); + + }; + + jQuery(this).bind("scroll", handler).data(uid1, handler); + + }, + teardown: function(){ + jQuery(this).unbind( "scroll", jQuery(this).data(uid1) ); + } + }; + + special.scrollstop = { + latency: 300, + setup: function() { + + var timer, + handler = function(evt) { + + var _self = this, + _args = arguments; + + if (timer) { + clearTimeout(timer); + } + + timer = setTimeout( function(){ + + timer = null; + evt.type = "scrollstop"; + jQuery.event.dispatch.apply(_self, _args); + + + }, special.scrollstop.latency); + + }; + + jQuery(this).bind("scroll", handler).data(uid2, handler); + + }, + teardown: function() { + jQuery(this).unbind( "scroll", jQuery(this).data(uid2) ); + } + }; + +})(); \ No newline at end of file diff --git a/lib/jquery_lazyload/jquery.scrollstop.min.js b/lib/jquery_lazyload/jquery.scrollstop.min.js new file mode 100644 index 0000000000..8a1bde1bc7 --- /dev/null +++ b/lib/jquery_lazyload/jquery.scrollstop.min.js @@ -0,0 +1,2 @@ +/*! Lazy Load 1.9.5 - MIT license - Copyright 2010-2015 Mika Tuupola */ +!function(){var a=jQuery.event.special,b="D"+ +new Date,c="D"+(+new Date+1);a.scrollstart={setup:function(){var c,d=function(b){var d=this,e=arguments;c?clearTimeout(c):(b.type="scrollstart",jQuery.event.dispatch.apply(d,e)),c=setTimeout(function(){c=null},a.scrollstop.latency)};jQuery(this).bind("scroll",d).data(b,d)},teardown:function(){jQuery(this).unbind("scroll",jQuery(this).data(b))}},a.scrollstop={latency:300,setup:function(){var b,d=function(c){var d=this,e=arguments;b&&clearTimeout(b),b=setTimeout(function(){b=null,c.type="scrollstop",jQuery.event.dispatch.apply(d,e)},a.scrollstop.latency)};jQuery(this).bind("scroll",d).data(c,d)},teardown:function(){jQuery(this).unbind("scroll",jQuery(this).data(c))}}}(); \ No newline at end of file diff --git a/lib/jquery_lazyload/lazyload.jquery.json b/lib/jquery_lazyload/lazyload.jquery.json new file mode 100644 index 0000000000..e97841694f --- /dev/null +++ b/lib/jquery_lazyload/lazyload.jquery.json @@ -0,0 +1,35 @@ +{ + "name": "lazyload", + "version": "1.9.5", + "title": "Lazy Load", + "author": { + "name": "Mika Tuupola", + "email": "tuupola@appelsiini.net", + "url": "http://www.appelsiini.net/" + }, + "licenses": [ + { + "type": "MIT", + "url": "http://www.opensource.org/licenses/mit-license.php" + } + ], + "dependencies": { + }, + "description": "Delay loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them.", + "keywords": [ + "lazyload", + "lazy", + "load", + "image" + ], + "homepage": "http://www.appelsiini.net/projects/lazyload", + "bugs": "https://github.com/tuupola/jquery_lazyload/issues", + "docs": "http://www.appelsiini.net/projects/lazyload", + "demo": "http://www.appelsiini.net/projects/lazyload/enabled_fadein.html", + "files": [ + "jquery.lazyload.js", + "jquery.lazyload.min.js", + "jquery.scrollstop.js", + "jquery.scrollstop.min.js" + ] +} \ No newline at end of file diff --git a/lib/jquery_lazyload/package.json b/lib/jquery_lazyload/package.json new file mode 100644 index 0000000000..ce1388e8ca --- /dev/null +++ b/lib/jquery_lazyload/package.json @@ -0,0 +1,37 @@ +{ + "name": "jquery-lazyload", + "version": "1.9.5", + "engines": { + "node": ">= 0.8.0" + }, + "repository": { + "type": "git", + "url": "git@github.com:tuupola/jquery_lazyload.git" + }, + "author": "Mika Tuupola ", + "scripts": { + "test": "grunt test" + }, + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-jshint": "~0.6.4", + "grunt-contrib-uglify": "~0.2.4", + "grunt-contrib-jasmine": "~0.5.2", + "grunt-contrib-watch": "~0.5.3" + }, + "description": "Lazyload images with jQuery", + "bugs": { + "url": "https://github.com/tuupola/jquery_lazyload/issues" + }, + "homepage": "http://www.appelsiini.net/projects/lazyload", + "main": "Gruntfile.js", + "files": [ + "jquery.lazyload.js", + "jquery.scrollstop.js" + ], + "keywords": [ + "jquery-plugin", + "ecosystem:jquery" + ], + "license": "MIT" +}