mirror of
https://github.com/librenms/librenms.git
synced 2024-09-22 02:48:37 +00:00
Daniel Preussker
commit
6efe5b086c
@ -30,6 +30,12 @@ LibreNMS ships with the following software components:
|
||||
Mark Gibbons <mgibbons@oemcomp.com>
|
||||
Initial code base submited via PR721
|
||||
|
||||
- Jquery LazyLoad
|
||||
http://www.appelsiini.net/projects/lazyload
|
||||
Mika Tuupola <tuupola@appelsiini.net> (@tuupola on github)
|
||||
MIT License
|
||||
|
||||
|
||||
Other components (needs details filled in):
|
||||
- JpGraph (html/includes/jpgraph): QPL 1.0 license
|
||||
|
||||
|
||||
@ -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.'</a>';
|
||||
@ -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 '<img class="lazy" width="'.$w.'" height="'.$h.'" data-original="graph.php?' . implode('&',$urlargs).'" border="0" />';
|
||||
|
||||
}//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.
|
||||
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -155,6 +155,8 @@ else {
|
||||
<script src="js/jquery.bootgrid.min.js"></script>
|
||||
<script src="js/handlebars.min.js"></script>
|
||||
<script src="js/pace.min.js"></script>
|
||||
<script src="js/jquery.lazyload.min.js"></script>
|
||||
<script src="js/lazyload.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
<!-- Begin
|
||||
|
||||
1
html/js/jquery.lazyload.min.js
vendored
Symbolic link
1
html/js/jquery.lazyload.min.js
vendored
Symbolic link
@ -0,0 +1 @@
|
||||
../../lib/jquery_lazyload/jquery.lazyload.min.js
|
||||
36
html/js/lazyload.js
Normal file
36
html/js/lazyload.js
Normal file
@ -0,0 +1,36 @@
|
||||
/*
|
||||
* LibreNMS module to initialize and support lazy loading of graph images
|
||||
*
|
||||
* Copyright (c) 2015 Travis Hegner <http://travishegner.com/>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the
|
||||
* Free Software Foundation, either version 3 of the License, or (at your
|
||||
* option) any later version. Please see LICENSE.txt at the top level of
|
||||
* the source code distribution for details.
|
||||
*/
|
||||
$(document).ready(function(){
|
||||
|
||||
//initialize jquery lazyload for all '.lazy' img tags
|
||||
$("img.lazy").load(lazyload_done).lazyload({
|
||||
effect: "fadeIn",
|
||||
threshold: 300,
|
||||
placeholder: ""
|
||||
});
|
||||
|
||||
|
||||
//re-initializes images loaded after an ajax call
|
||||
$(document).ajaxStop(function() {
|
||||
$("img.lazy").load(lazyload_done).lazyload({
|
||||
effect: "fadeIn",
|
||||
threshold: 300,
|
||||
placeholder: ""
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function lazyload_done() {
|
||||
//Since RRD takes the width and height params for only the canvas, we must unset them
|
||||
//from the final (larger) image to prevent the browser from resizing them.
|
||||
$(this).removeAttr('width').removeAttr('height').removeClass('lazy');
|
||||
}
|
||||
@ -31,7 +31,7 @@ foreach ($app_devices as $app_device) {
|
||||
|
||||
$link = generate_url(array('page' => 'device', 'device' => $app_device['device_id'], 'tab' => 'apps', 'app' => $vars['app']));
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
echo '</td>';
|
||||
|
||||
@ -24,7 +24,7 @@ foreach (dbFetchRows('SELECT * FROM `hrDevice` WHERE `device_id` = ? ORDER BY `h
|
||||
$graph_array_zoom['height'] = '150';
|
||||
$graph_array_zoom['width'] = '400';
|
||||
|
||||
$mini_graph = overlib_link($proc_url, generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), null);
|
||||
$mini_graph = overlib_link($proc_url, generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
|
||||
|
||||
echo '<td>'.$mini_graph.'</td>';
|
||||
}
|
||||
@ -45,7 +45,7 @@ foreach (dbFetchRows('SELECT * FROM `hrDevice` WHERE `device_id` = ? ORDER BY `h
|
||||
$graph_array_zoom['width'] = '400';
|
||||
|
||||
// FIXME click on graph should also link to port, but can't use generate_port_link here...
|
||||
$mini_graph = overlib_link(generate_port_url($interface), generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), null);
|
||||
$mini_graph = overlib_link(generate_port_url($interface), generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
|
||||
|
||||
echo "<td>$mini_graph</td>";
|
||||
}
|
||||
|
||||
@ -77,7 +77,7 @@ foreach ($entity_state['group']['c6kxbar'] as $index => $entry) {
|
||||
$graph_array['height'] = 20;
|
||||
$graph_array['bg'] = 'ffffff00';
|
||||
// the 00 at the end makes the area transparent.
|
||||
$minigraph = generate_graph_tag($graph_array);
|
||||
$minigraph = generate_lazy_graph_tag($graph_array);
|
||||
|
||||
echo ('<tr>
|
||||
<td></td>
|
||||
|
||||
@ -52,7 +52,7 @@ if (count($sensors)) {
|
||||
$graph_array['bg'] = 'ffffff00';
|
||||
// the 00 at the end makes the area transparent.
|
||||
$graph_array['from'] = $config['time']['day'];
|
||||
$sensor_minigraph = generate_graph_tag($graph_array);
|
||||
$sensor_minigraph = generate_lazy_graph_tag($graph_array);
|
||||
|
||||
$sensor['sensor_descr'] = truncate($sensor['sensor_descr'], 48, '');
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@ if (count($mempools)) {
|
||||
$graph_array['height'] = 20;
|
||||
$graph_array['bg'] = 'ffffff00';
|
||||
// the 00 at the end makes the area transparent.
|
||||
$minigraph = generate_graph_tag($graph_array);
|
||||
$minigraph = generate_lazy_graph_tag($graph_array);
|
||||
|
||||
echo '<tr>
|
||||
<td>'.overlib_link($link, $text_descr, $overlib_content).'</td>
|
||||
|
||||
@ -17,7 +17,7 @@ if ($ports['total']) {
|
||||
$graph_array['type'] = 'device_bits';
|
||||
$graph_array['from'] = $config['time']['day'];
|
||||
$graph_array['legend'] = 'no';
|
||||
$graph = generate_graph_tag($graph_array);
|
||||
$graph = generate_lazy_graph_tag($graph_array);
|
||||
|
||||
$link_array = $graph_array;
|
||||
$link_array['page'] = 'graphs';
|
||||
|
||||
@ -45,7 +45,7 @@ if (count($processors)) {
|
||||
$graph_array['height'] = 20;
|
||||
$graph_array['bg'] = 'ffffff00';
|
||||
// the 00 at the end makes the area transparent.
|
||||
$minigraph = generate_graph_tag($graph_array);
|
||||
$minigraph = generate_lazy_graph_tag($graph_array);
|
||||
|
||||
echo '<tr>
|
||||
<td>'.overlib_link($link, $text_descr, $overlib_content).'</td>
|
||||
|
||||
@ -66,7 +66,7 @@ if (count($drives)) {
|
||||
$graph_array['height'] = 20;
|
||||
$graph_array['bg'] = 'ffffff00';
|
||||
// the 00 at the end makes the area transparent.
|
||||
$minigraph = generate_graph_tag($graph_array);
|
||||
$minigraph = generate_lazy_graph_tag($graph_array);
|
||||
|
||||
echo '<tr>
|
||||
<td>'.overlib_link($link, $drive['storage_descr'], $overlib_content).'</td>
|
||||
|
||||
@ -42,7 +42,7 @@ if (count($toners)) {
|
||||
$graph_array['height'] = 20;
|
||||
$graph_array['bg'] = 'ffffff00';
|
||||
// the 00 at the end makes the area transparent.
|
||||
$minigraph = generate_graph_tag($graph_array);
|
||||
$minigraph = generate_lazy_graph_tag($graph_array);
|
||||
|
||||
echo '<tr>
|
||||
<td>'.overlib_link($link, $toner['toner_descr'], $overlib_content).'</td>
|
||||
|
||||
@ -44,7 +44,7 @@ foreach (dbFetchRows('SELECT * FROM juniAtmVp WHERE port_id = ?', array($interfa
|
||||
$graph_array_zoom = $graph_array;
|
||||
$graph_array_zoom['height'] = '150';
|
||||
$graph_array_zoom['width'] = '400';
|
||||
echo overlib_link('#', generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), null);
|
||||
echo overlib_link('#', generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
|
||||
}
|
||||
|
||||
echo '</td></tr>';
|
||||
|
||||
@ -197,7 +197,7 @@ if($format == "graph") {
|
||||
<div style=\'font-size: 16px; padding:5px; font-weight: bold; color: #e5e5e5;\'>".$device['hostname']." - ".$interface['ifDescr']."</div>\
|
||||
<img src=\'graph.php?type=$graph_type&device=".$device['device_id']."&from=".$config['time']['day']."&to=".$config['time']['now']."&width=450&height=150&title=yes\'>\
|
||||
', CENTER, LEFT, FGCOLOR, '#e5e5e5', BGCOLOR, '#e5e5e5', WIDTH, 400, HEIGHT, 150);\" onmouseout=\"return nd();\" >".
|
||||
"<img src='graph.php?type=$graph_type&device=".$device['device_id']."&from=".$config['time']['day']."&to=".$config['time']['now']."&width=".$width."&height=110&legend=no&title=yes'>
|
||||
"<img class='lazy' height='110' width='$width' data-original='graph.php?type=$graph_type&device=".$device['device_id']."&from=".$config['time']['day']."&to=".$config['time']['now']."&width=".$width."&height=110&legend=no&title=yes'>
|
||||
</a>
|
||||
</div>");
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@ else {
|
||||
echo('<td align=center>');
|
||||
echo('<span class="device-head">'.$text.'</span><br />');
|
||||
echo('<a href="'.$link.'">');
|
||||
echo(generate_graph_tag($graph_array));
|
||||
echo generate_lazy_graph_tag($graph_array);
|
||||
echo('</a>');
|
||||
echo('</td>');
|
||||
|
||||
@ -202,7 +202,7 @@ else {
|
||||
echo generate_graph_js_state($graph_array);
|
||||
|
||||
echo('<div style="width: '.$graph_array['width'].'; margin: auto;">');
|
||||
echo(generate_graph_tag($graph_array));
|
||||
echo generate_lazy_graph_tag($graph_array);
|
||||
echo("</div>");
|
||||
|
||||
if (isset($config['graph_descr'][$vars['type']])) {
|
||||
|
||||
@ -75,7 +75,7 @@ foreach (dbFetchRows($sql, $param) as $sensor) {
|
||||
$graph_array['bg'] = 'ffffff00';
|
||||
// the 00 at the end makes the area transparent.
|
||||
$graph_array['from'] = $config['time']['day'];
|
||||
$sensor_minigraph = generate_graph_tag($graph_array);
|
||||
$sensor_minigraph = generate_lazy_graph_tag($graph_array);
|
||||
|
||||
$sensor['sensor_descr'] = truncate($sensor['sensor_descr'], 48, '');
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ foreach (dbFetchRows('SELECT * FROM `toner` AS S, `devices` AS D WHERE S.device_
|
||||
$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(100 - $perc);
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ foreach ($ports as $port) {
|
||||
$graph_array['title'] = 'yes';
|
||||
$graph_array['width'] = $width;
|
||||
$graph_array['height'] = 119;
|
||||
$graph = generate_graph_tag($graph_array);
|
||||
$graph = generate_lazy_graph_tag($graph_array);
|
||||
|
||||
echo "<div style='display: block; padding: 1px; margin: 2px; min-width: ".$width_div.'px; max-width:'.$width_div."px; min-height:180px; max-height:180px; text-align: center; float: left; background-color: #f5f5f5;'>";
|
||||
echo overlib_link($link, $graph, $overlib_content);
|
||||
|
||||
@ -113,7 +113,7 @@ foreach (dbFetchRows($host_sql, $host_par) as $device) {
|
||||
$graph_array_zoom = $graph_array;
|
||||
$graph_array_zoom['height'] = '150';
|
||||
$graph_array_zoom['width'] = '400';
|
||||
echo overlib_link('', generate_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), null);
|
||||
echo overlib_link('', generate_lazy_graph_tag($graph_array), generate_graph_tag($graph_array_zoom), NULL);
|
||||
}
|
||||
|
||||
echo '</td></tr>';
|
||||
|
||||
1
lib/jquery_lazyload/.gitignore
vendored
Normal file
1
lib/jquery_lazyload/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
||||
15
lib/jquery_lazyload/.jshintrc
Normal file
15
lib/jquery_lazyload/.jshintrc
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"curly": true,
|
||||
"eqeqeq": true,
|
||||
"eqnull": true,
|
||||
"immed": true,
|
||||
"noarg": true,
|
||||
"quotmark": "double",
|
||||
"trailing": true,
|
||||
"undef": true,
|
||||
"unused": true,
|
||||
|
||||
"node": true,
|
||||
"jquery": true,
|
||||
"browser": true
|
||||
}
|
||||
121
lib/jquery_lazyload/CHANGELOG.textile
Normal file
121
lib/jquery_lazyload/CHANGELOG.textile
Normal file
@ -0,0 +1,121 @@
|
||||
h1. Lazy Load Plugin for jQuery
|
||||
|
||||
Lazy Load delays loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them. This is opposite of image preloading.
|
||||
|
||||
Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
|
||||
|
||||
Lazy Load is inspired by "YUI ImageLoader":http://developer.yahoo.com/yui/imageloader/ Utility by Matt Mlinac.
|
||||
|
||||
h2. How to Use?
|
||||
|
||||
Lazy Load depends on jQuery. Include them both in end of your HTML code:
|
||||
|
||||
<pre><script src="jquery.js" type="text/javascript"></script>
|
||||
<script src="jquery.lazyload.js" type="text/javascript"></script></pre>
|
||||
|
||||
You must alter your HTML code. URL of the real image must be put into data-original attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to. Note that you should have width and height attributes in your image tag.
|
||||
|
||||
<pre><img class="lazy" data-original="img/example.jpg" width="640" height="480"></pre>
|
||||
|
||||
then in your code do:
|
||||
|
||||
<pre>$("img.lazy").lazyload();</pre>
|
||||
|
||||
This causes all images of class lazy to be lazy loaded.
|
||||
|
||||
More information on "Lazy Load":http://www.appelsiini.net/projects/lazyload project page.
|
||||
|
||||
h4. Install with "bower":http://bower.io
|
||||
|
||||
<pre>$ bower install jquery.lazyload</pre>
|
||||
|
||||
h1. License
|
||||
|
||||
All code licensed under the "MIT License":http://www.opensource.org/licenses/mit-license.php. All images licensed under "Creative Commons Attribution 3.0 Unported License":http://creativecommons.org/licenses/by/3.0/deed.en_US. In other words you are basically free to do whatever you want. Just don't remove my name from the source.
|
||||
|
||||
h1. Changelog
|
||||
|
||||
h2. 1.9.3
|
||||
|
||||
* Improved Bower support
|
||||
|
||||
h2. 1.9.2
|
||||
|
||||
* Bower support ("mrzmyr":https://github.com/mrzmyr)
|
||||
|
||||
h2. 1.9.1
|
||||
|
||||
* Fix iOS5 detection for iPhone ("Berik Visschens":https://github.com/berikv)
|
||||
* Use .attr() instead of .data() since jQuery caches values when using latter. Fixes "#37":https://github.com/tuupola/jquery_lazyload/pull/37, "#144":https://github.com/tuupola/jquery_lazyload/issues/144 and "#101":https://github.com/tuupola/jquery_lazyload/issues/101 ("Lorenz an Mey":https://github.com/swiftyone).
|
||||
* Do not add data:uri placeholder for non image elements.
|
||||
|
||||
h3. 1.9.0
|
||||
|
||||
* Add support for CSS background images.
|
||||
* Make external placeholder image optional by providing default 1x1 grey image as data uri ("Dave Mc Nicoll":https://github.com/mcNdave)
|
||||
* Fix bug "#47":https://github.com/tuupola/jquery_lazyload/pull/47 and "#71":https://github.com/tuupola/jquery_lazyload/issues/71. Mobile Safari window height changes when scrolling. ("Girvan":https://github.com/girvan)
|
||||
|
||||
h3. 1.8.5
|
||||
|
||||
* Revert "#70":https://github.com/tuupola/jquery_lazyload/issues/70 because it causes more problem than solves. Only proper fix in Webkit browsers is to set width and height either as attributes or in CSS. Without width and height Webkit sees image as size 0x0 and causes jQuery to assume they are not visible. Fixes bugs "#99":https://github.com/tuupola/jquery_lazyload/pull/99, "#98":https://github.com/tuupola/jquery_lazyload/issues/98 and "#88":https://github.com/tuupola/jquery_lazyload/issues/88.
|
||||
* Fix bug "#118":https://github.com/tuupola/jquery_lazyload/issues/118. Scrollstop event was not compatible with jQuery 1.9.x.
|
||||
* Fix bug "#120":https://github.com/tuupola/jquery_lazyload/pull/120. Sometimes event.originalEvent was not defined under iOS. ("David G. Durand":https://github.com/daviddurand)
|
||||
|
||||
h3. 1.8.4
|
||||
|
||||
* Support for "jQuery plugin repository":http://plugins.jquery.com/
|
||||
|
||||
h3. 1.8.3
|
||||
|
||||
* Proper fix for "#48":https://github.com/tuupola/jquery_lazyload/pull/48. If image did not have width and height set Webkit browsers needed initial scroll for images to display. ("@sc-aboudreau":https://github.com/sc-aboudreau)
|
||||
|
||||
h3. 1.8.2
|
||||
|
||||
* Workaround for bug "#30":https://github.com/tuupola/jquery_lazyload/issues/30 IOS5 Safari did not load images when navigating with back button.
|
||||
|
||||
h3. 1.8.1
|
||||
|
||||
* Fix bug "#48":https://github.com/tuupola/jquery_lazyload/pull/48. In some cases initial scroll was needed for images to load. ("Nick George":https://github.com/Izzmo)
|
||||
* Fix bug "#42":https://github.com/tuupola/jquery_lazyload/pull/42. Reset internal failure counter when image is found. Makes counter logic more intuitive. ("Josep del Rio":https://github.com/joseprio)
|
||||
* Fix bug "#52":https://github.com/tuupola/jquery_lazyload/pull/42. Fix :in-viewport convenience method. ("Jonathan Palardy":https://github.com/jpalardy)
|
||||
|
||||
|
||||
h3. 1.8.0
|
||||
|
||||
* Allow different elements to use different containers. ("Rob Walch":https://github.com/robwalch)
|
||||
|
||||
h3. 1.7.1
|
||||
|
||||
* Fix bug "#18":https://github.com/tuupola/jquery_lazyload/pull/18. Document was always scrolled to top issue on IE 7 and Chrome 17 if using jQuery 1.6 or older. ("Ross Allen":https://github.com/ssorallen)
|
||||
* General code speedup ("Valentin Zwick":https://github.com/vzwick)
|
||||
|
||||
h3. 1.7.0
|
||||
|
||||
* Optimized viewport selectors. Around 25% "speed increase":http://jsperf.com/lazyload-1-7-0 compared to "1.6.0":http://jsperf.com/lazyload-1-6-0.
|
||||
* Add _data_attribute_ parameter. Allows custom naming of original data attribute. ("Bryan Chow":https://github.com/bryanchow)
|
||||
* Track window resize event. ("Simon Baynes":https://github.com/baynezy)
|
||||
* Add _appear_ event. This function is called when image appears to viewport but before it is loaded.
|
||||
* Add _load_ event. This function is called when image is loaded. ("Nick Larson":https://github.com/ifightcrime)
|
||||
* Renamed _effectspeed_ parameter to _effect_speed_. Old version will still works couple of versions. This parameter was previously undocumented.
|
||||
* Fix _failure_limit_ bug "#19":https://github.com/tuupola/jquery_lazyload/issues/19. ("Brandon":https://github.com/Brandon0)
|
||||
|
||||
h3. 1.6.0
|
||||
|
||||
* Rename original attribute to data-original to be HTML5 friendly.
|
||||
* Remove all code regarding placeholder and automatically removing src attribute. It does not work with modern browsers. Must use data-original attribute instead.
|
||||
* Add support for James Padolseys "scrollstop event":http://james.padolsey.com/javascript/special-scroll-events-for-jquery/. Use when you have hundreds of images.
|
||||
* Add _skip_invisible_ parameter. When true plugin will skip invisible images. ("Valentin Zwick":https://github.com/vzwick)
|
||||
* Renamed _failurelimit_ parameter to _failure_limit_. Old version will still work couple of versions.
|
||||
|
||||
h3. 1.5.0
|
||||
|
||||
* Support for removing the src attribute already in HTML. This is not a drop in solution but gives additional speed for those who need it. (Jeremy Pollock)
|
||||
|
||||
h3. 1.4.0
|
||||
|
||||
* When scrolling down quickly do not load the images above the top. (Bart Bruil)
|
||||
|
||||
h3. 1.3.2
|
||||
|
||||
* Support for scrolling within a container.
|
||||
* Fixed IE not loading images.
|
||||
39
lib/jquery_lazyload/CONTRIBUTING.md
Normal file
39
lib/jquery_lazyload/CONTRIBUTING.md
Normal file
@ -0,0 +1,39 @@
|
||||
# Contributing to Lazy Load
|
||||
|
||||
## Only one feature or change per pull request
|
||||
|
||||
Make pull requests only one feature or change at the time. For example you have fixed a bug. You also have optimized some code. Optimization is not related to a bug. These should be submitted as separate pull requests. This way I can easily choose what to include. It is also easier to understand the code changes. Commit messages should be descriptive and full sentences.
|
||||
|
||||
Do not commit minified versions. Do not touch the version number. Make the pull requests against [1.9.x branch](https://github.com/tuupola/jquery_lazyload/commits/1.9.x).
|
||||
|
||||
## Write meaningful commit messages
|
||||
|
||||
Proper commit message is full sentence. It starts with capital letter but does not end with period. Headlines do not end with period. The GitHub default `Update filename.js` is not enough. When needed include also longer explanation what the commit does.
|
||||
|
||||
```
|
||||
Capitalized, short (50 chars or less) summary
|
||||
|
||||
More detailed explanatory text, if necessary. Wrap it to about 72
|
||||
characters or so. In some contexts, the first line is treated as the
|
||||
subject of an email and the rest of the text as the body. The blank
|
||||
line separating the summary from the body is critical (unless you omit
|
||||
the body entirely); tools like rebase can get confused if you run the
|
||||
two together.
|
||||
```
|
||||
|
||||
When in doubt see Tim Pope's blogpost [A Note About Git Commit Messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
|
||||
|
||||
## Follow the existing coding standards
|
||||
|
||||
When contributing to open source project it is polite to follow the original authors coding standars. They might be different than yours. It is not a holy war. Just follow then original.
|
||||
|
||||
```javascript
|
||||
var snake_case = "something";
|
||||
|
||||
function camelCase(options) {
|
||||
}
|
||||
|
||||
if (true !== false) {
|
||||
console.log("here be dragons");
|
||||
}
|
||||
```
|
||||
46
lib/jquery_lazyload/Gruntfile.js
vendored
Normal file
46
lib/jquery_lazyload/Gruntfile.js
vendored
Normal file
@ -0,0 +1,46 @@
|
||||
module.exports = function(grunt) {
|
||||
"use strict";
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON("package.json"),
|
||||
uglify : {
|
||||
options: {
|
||||
banner: "/*! Lazy Load <%= pkg.version %> - MIT license - Copyright 2010-2015 Mika Tuupola */\n"
|
||||
},
|
||||
target: {
|
||||
files: {
|
||||
"jquery.lazyload.min.js" : "jquery.lazyload.js",
|
||||
"jquery.scrollstop.min.js" : "jquery.scrollstop.js"
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
files: ["*.js", "!*.min.js" ,"test/spec/*Spec.js"],
|
||||
tasks: ["test"],
|
||||
},
|
||||
jshint: {
|
||||
files: ["*.js", "!*.min.js" ,"test/spec/*Spec.js"],
|
||||
options: {
|
||||
jshintrc: ".jshintrc"
|
||||
}
|
||||
},
|
||||
jasmine: {
|
||||
src: ["jquery.lazyload.js"],
|
||||
options: {
|
||||
helpers: "test/spec/*Helper.js",
|
||||
specs: "test/spec/*Spec.js",
|
||||
vendor: ["test/vendor/jquery-1.9.0.js", "test/vendor/jasmine-jquery.js"]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks("grunt-contrib-uglify");
|
||||
grunt.loadNpmTasks("grunt-contrib-jshint");
|
||||
grunt.loadNpmTasks("grunt-contrib-jasmine");
|
||||
grunt.loadNpmTasks("grunt-contrib-watch");
|
||||
|
||||
//grunt.registerTask("test", ["jshint", "jasmine"]);
|
||||
grunt.registerTask("test", ["jshint"]);
|
||||
grunt.registerTask("default", ["test", "uglify"]);
|
||||
|
||||
};
|
||||
48
lib/jquery_lazyload/README.md
Normal file
48
lib/jquery_lazyload/README.md
Normal file
@ -0,0 +1,48 @@
|
||||
# Lazy Load Plugin for jQuery
|
||||
|
||||
Lazy Load delays loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them. This is opposite of image preloading.
|
||||
|
||||
Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
|
||||
|
||||
Lazy Load is inspired by [YUI ImageLoader](http://developer.yahoo.com/yui/imageloader/) Utility by Matt Mlinac.
|
||||
|
||||
## How to Use?
|
||||
|
||||
Lazy Load depends on jQuery. Include them both in end of your HTML code:
|
||||
|
||||
```html
|
||||
<script src="jquery.js" type="text/javascript"></script>
|
||||
<script src="jquery.lazyload.js" type="text/javascript"></script>
|
||||
```
|
||||
|
||||
You must alter your HTML code. URL of the real image must be put into data-original attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to. Note that you should have width and height attributes in your image tag.
|
||||
|
||||
```html
|
||||
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
|
||||
```
|
||||
|
||||
then in your code do:
|
||||
|
||||
```js
|
||||
$("img.lazy").lazyload();
|
||||
```
|
||||
|
||||
This causes all images of class lazy to be lazy loaded.
|
||||
|
||||
More information on [Lazy Load](http://www.appelsiini.net/projects/lazyload) project page.
|
||||
|
||||
## Install
|
||||
|
||||
You can install with [bower](http://bower.io/) or [npm](https://www.npmjs.com/).
|
||||
|
||||
|
||||
```sh
|
||||
$ bower install jquery.lazyload
|
||||
$ npm install jquery-lazyload
|
||||
```
|
||||
|
||||
|
||||
# License
|
||||
|
||||
All code licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php). All images licensed under [Creative Commons Attribution 3.0 Unported License](http://creativecommons.org/licenses/by/3.0/deed.en_US). In other words you are basically free to do whatever you want. Just don't remove my name from the source.
|
||||
|
||||
27
lib/jquery_lazyload/bower.json
Normal file
27
lib/jquery_lazyload/bower.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "jquery_lazyload",
|
||||
"version": "1.9.4",
|
||||
"homepage": "http://www.appelsiini.net/projects/lazyload",
|
||||
"authors": [
|
||||
"Mika Tuupola <tuupola@appelsiini.net>"
|
||||
],
|
||||
"description": "jQuery plugin for lazy loading images",
|
||||
"main": [
|
||||
"jquery.lazyload.js",
|
||||
"jquery.scrollstop.js"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"**/*.min.js",
|
||||
"**/*.html",
|
||||
"**/*.textile",
|
||||
"Gruntfile.js",
|
||||
"lazyload.jquery.json",
|
||||
"package.json",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"img"
|
||||
]
|
||||
}
|
||||
110
lib/jquery_lazyload/disabled.html
Normal file
110
lib/jquery_lazyload/disabled.html
Normal file
@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Disabled</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h2>Plugin disabled</h2>
|
||||
<p>
|
||||
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 <a href="enabled_wide.html">sideways</a> or
|
||||
<a href="enabled_gazillion.html">gazillion images</a>.
|
||||
</p>
|
||||
|
||||
<img class="img-responsive" src="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br>
|
||||
<img class="img-responsive" src="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br>
|
||||
<img class="img-responsive" src="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br>
|
||||
<img class="img-responsive" src="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br>
|
||||
<img class="img-responsive" src="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br>
|
||||
<img class="img-responsive" src="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://www.appelsiini.net/js/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
123
lib/jquery_lazyload/enabled.html
Normal file
123
lib/jquery_lazyload/enabled.html
Normal file
@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Enabled</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
|
||||
<h2>Plugin enabled</h2>
|
||||
<p>
|
||||
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 <a href="disabled.html">disabled</a>, same page with
|
||||
<a href="enabled_fadein.html">fadein effect</a>, page with <a href="enabled_wide.html">wide
|
||||
layout</a> or wide content <a href="enabled_wide_container.html">inside container</a>.
|
||||
</p>
|
||||
|
||||
<pre class="prettyprint">$("img.lazy").lazyload();</pre>
|
||||
<pre class="prettyprint"><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre>
|
||||
|
||||
<div id="container">
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="http://www.appelsiini.net/js/all.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
$("img.lazy").lazyload();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
126
lib/jquery_lazyload/enabled_ajax.html
Normal file
126
lib/jquery_lazyload/enabled_ajax.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Enabled With AJAX Content</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img, #container {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
|
||||
<h2>Plugin enabled with AJAX loaded content</h2>
|
||||
<p>
|
||||
Images are loaded via AJAX(H) call after you click the container. Lazy Load
|
||||
is applied in the callback.
|
||||
</p>
|
||||
<pre class="prettyprint">
|
||||
$("#container").one("click", function() {
|
||||
$("#container").load("images.html", function(response, status, xhr) {
|
||||
$("img.lazy").lazyload();
|
||||
});
|
||||
});</pre>
|
||||
<pre class="prettyprint"> <img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre>
|
||||
<div id="container">
|
||||
Click me to load content...
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="http://www.appelsiini.net/js/demo.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
$("#container").one("click", function() {
|
||||
$("#container").load("enabled.html #container", function(response, status, xhr) {
|
||||
$("img.lazy").lazyload();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
123
lib/jquery_lazyload/enabled_background.html
Normal file
123
lib/jquery_lazyload/enabled_background.html
Normal file
@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Enabled With CSS Background Images</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
|
||||
<h2>Plugin enabled on css background images with fadein effect</h2>
|
||||
<p>
|
||||
Here be dragons.
|
||||
</p>
|
||||
<pre class="prettyprint">
|
||||
<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"
|
||||
});
|
||||
</pre>
|
||||
<div class="lazy" data-original="img/bmw_m1_hood.jpg" style="width: 765px; height: 574px; background-image: url('img/grey.gif')"></div>
|
||||
<div class="lazy" data-original="img/bmw_m1_side.jpg" style="width: 765px; height: 574px; background-image: url('img/grey.gif')"></div>
|
||||
<div class="lazy" data-original="img/viper_1.jpg" style="width: 765px; height: 574px; background-image: url('img/grey.gif')"></div>
|
||||
<div class="lazy" data-original="img/viper_corner.jpg" style="width: 765px; height: 574px; background-image: url('img/grey.gif')"></div>
|
||||
<div class="lazy" data-original="img/bmw_m3_gt.jpg" style="width: 765px; height: 574px; background-image: url('img/grey.gif')"></div>
|
||||
<div class="lazy" data-original="img/corvette_pitstop.jpg" style="width: 765px; height: 574px; background-image: url('img/grey.gif')"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="http://www.appelsiini.net/js/demo.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
$("div.lazy").lazyload({
|
||||
effect : "fadeIn"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
136
lib/jquery_lazyload/enabled_container.html
Normal file
136
lib/jquery_lazyload/enabled_container.html
Normal file
@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Enabled on Container</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#container {
|
||||
height: 600px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
|
||||
<h2>Plugin enabled on container</h2>
|
||||
<p>
|
||||
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
|
||||
<a href="disabled.html">disabled</a> or same page with <a href="enabled_fadein.html">fadein effect</a>.
|
||||
</p>
|
||||
<pre class="prettyprint">
|
||||
$("img.lazy").lazyload({
|
||||
effect : "fadeIn",
|
||||
container: $("#container")
|
||||
});
|
||||
</pre>
|
||||
<pre class="prettyprint">
|
||||
#container {
|
||||
height: 600px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</pre>
|
||||
<pre class="prettyprint"><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre>
|
||||
<div id="container">
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="http://www.appelsiini.net/js/demo.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
$("img.lazy").lazyload({effect : "fadeIn", container: $("#container")});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
128
lib/jquery_lazyload/enabled_fadein.html
Normal file
128
lib/jquery_lazyload/enabled_fadein.html
Normal file
@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Enabled With FadeIn Effect</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
|
||||
<h2>Plugin enabled with fadein effect</h2>
|
||||
<p>
|
||||
Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down
|
||||
they are loaded when needed. Images appear using <a href="http://docs.jquery.com/Effects/fadeIn">fadeIn</a>
|
||||
effect. Empty cache and shift-reload to test again. Compare this to page where plugin is
|
||||
<a href="enabled.html">without effects</a>.
|
||||
</p>
|
||||
<pre class="prettyprint">
|
||||
$("img.lazy").lazyload({
|
||||
effect : "fadeIn"
|
||||
});
|
||||
</pre>
|
||||
<pre class="prettyprint"><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre>
|
||||
<div id="container">
|
||||
<img class="lazy img-responsive" src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="http://www.appelsiini.net/js/demo.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
$("img.lazy").lazyload({
|
||||
effect : "fadeIn"
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
283
lib/jquery_lazyload/enabled_gazillion.html
Normal file
283
lib/jquery_lazyload/enabled_gazillion.html
Normal file
@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Enabled With Gazillion Images</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
|
||||
<h2>Plugin enabled with gazillion images</h2>
|
||||
<p>
|
||||
When you have hundreds of images it is best to use James Padolseys <a href="http://james.padolsey.com/javascript/special-scroll-events-for-jquery/">scrollstop event</a>.
|
||||
Compate this to page where plugin is <a href="disabled.html">disabled</a> or page with
|
||||
<a href="enabled.html">larger images</a>.
|
||||
</p>
|
||||
|
||||
<pre class="prettyprint"><script src="jquery.scrollstop.js" type="text/javascript"></script> </pre>
|
||||
<pre class="prettyprint"><img class="lazy" data-original="img/example.jpg" width="80" height="120" alt=""></pre>
|
||||
<pre class="prettyprint">$("img.lazy").lazyload({
|
||||
event: "scrollstop"
|
||||
});</pre>
|
||||
|
||||
<div id="container">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
<img class="lazy" data-original="http://lorempixel.com/80/120/transport/?<?php print rand(); ?>" width="80" height="120" alt="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="jquery.scrollstop.js"></script>
|
||||
<script src="http://www.appelsiini.net/js/all.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("img.lazy").lazyload({
|
||||
event: "scrollstop"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
144
lib/jquery_lazyload/enabled_noscript.html
Normal file
144
lib/jquery_lazyload/enabled_noscript.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Enabled With Noscript Fallback</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.lazy {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
|
||||
<h2>Plugin enabled with noscript fallback</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<pre class="prettyprint">.lazy {
|
||||
display: none;
|
||||
}</pre>
|
||||
|
||||
<pre class="prettyprint">$("img.lazy").show().lazyload({
|
||||
effect : "fadeIn"
|
||||
});</pre>
|
||||
|
||||
<pre class="prettyprint"><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></pre>
|
||||
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
|
||||
|
||||
<noscript>
|
||||
<img class="img-responsive" src="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
|
||||
<img class="img-responsive" src="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
|
||||
<img class="img-responsive" src="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
|
||||
<img class="img-responsive" src="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
|
||||
<img class="img-responsive" src="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
|
||||
<img class="img-responsive" src="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
|
||||
</noscript>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="http://www.appelsiini.net/js/all.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
$("img.lazy").show().lazyload({
|
||||
effect : "fadeIn"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
135
lib/jquery_lazyload/enabled_timeout.html
Normal file
135
lib/jquery_lazyload/enabled_timeout.html
Normal file
@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Images After 5 Second Timeout</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
|
||||
<h2>Load images after five second delay</h2>
|
||||
<p>
|
||||
Here <a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a>
|
||||
plugin is enabled. Images below the fold are not loaded. Timeout will trigger five seconds after
|
||||
all other elements of page have been loaded.
|
||||
</p>
|
||||
<pre class="prettyprint">$(function() {
|
||||
$("img.lazy").lazyload({
|
||||
event : "sporty"
|
||||
});
|
||||
});
|
||||
|
||||
$(window).bind("load", function() {
|
||||
var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);
|
||||
}); </pre>
|
||||
|
||||
<pre class="prettyprint"><img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574"></pre>
|
||||
|
||||
<div id="container">
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
|
||||
<img class="lazy img-responsive" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="http://www.appelsiini.net/js/demo.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
$("img.lazy").lazyload({
|
||||
event : "sporty"
|
||||
});
|
||||
});
|
||||
$(window).bind("load", function() {
|
||||
var timeout = setTimeout(function() { $("img.lazy").trigger("sporty"); }, 5000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
126
lib/jquery_lazyload/enabled_wide.html
Normal file
126
lib/jquery_lazyload/enabled_wide.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Enabled</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 4750px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div id="content">
|
||||
|
||||
<h2>Plugin enabled</h2>
|
||||
<p>
|
||||
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
|
||||
<a href="disabled.html">disabled</a> or page with
|
||||
<a href="enabled_gazillion.html">gazillion images</a>.
|
||||
</p>
|
||||
<pre class="prettyprint">$("img.lazy").lazyload({
|
||||
effect: "fadeIn"
|
||||
});</pre>
|
||||
<pre class="prettyprint"><img class="lazy" data-original="img/example.jpg" width="765" height="574"></pre>
|
||||
|
||||
<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
|
||||
<img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
|
||||
<img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
|
||||
<img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
|
||||
<img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
|
||||
<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="http://www.appelsiini.net/js/demo.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
$("img.lazy").lazyload({effect: "fadeIn"});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
134
lib/jquery_lazyload/enabled_wide_container.html
Normal file
134
lib/jquery_lazyload/enabled_wide_container.html
Normal file
@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta charset="utf-8">
|
||||
<title>Lazy Load Enabled on Horizontal Container</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link type="text/css" media="screen" href="http://www.appelsiini.net/css/appelsiini.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="http://www.appelsiini.net/img/favicon.ico">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
//<![CDATA[
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-190966-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.container img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 800px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#inner_container {
|
||||
width: 4750px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
<h1>Lazy Load Plugin for jQuery</h1>
|
||||
<a href="http://www.appelsiini.net/"><span class="label label-info">Blog</span></a>
|
||||
<a href="http://www.appelsiini.net/projects"><span class="label label-danger">Projects</span></a>
|
||||
<br>
|
||||
<div>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="94" height="30"></iframe>
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&repo=jquery_lazyload&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
|
||||
|
||||
<h2>Plugin enabled on horizontal container</h2>
|
||||
<p>
|
||||
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
|
||||
<a href="disabled.html">disabled</a> or page with
|
||||
<a href="enabled_gazillion.html">gazillion images</a>.
|
||||
</p>
|
||||
<pre class="prettyprint">$("img.lazy").lazyload({
|
||||
container: $("#container")
|
||||
});</pre>
|
||||
<div id="container">
|
||||
<div id="inner_container">
|
||||
<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
|
||||
<img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
|
||||
<img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
|
||||
<img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
|
||||
<img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
|
||||
<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu bottom-menu-large bottom-menu-inverse">
|
||||
<div class="container">
|
||||
<div class="col-md-offset-1 col-lg-offset-2">
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">CATEGORIES</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/javascript">JavaScript</a></li>
|
||||
<li><a href="http://www.appelsiini.net/ruby">Ruby</a></li>
|
||||
<li><a href="http://www.appelsiini.net/avr">AVR</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">PROJECTS</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/chained">Chained</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/jeditable">Jeditable</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/viewport">Viewport</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-facebook-methodfix">Facebook Methodfix</a></li>
|
||||
<li><a href="http://www.appelsiini.net/projects/rack-funky-cache">Funky Cache</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-2">
|
||||
<h5 class="title">ABOUT</h5>
|
||||
<ul class="bottom-links">
|
||||
<li><a data-action="GitHub" data-label="footer" href="https://github.com/tuupola" class="icon-github-sign icon-large track"> GitHub</a></li>
|
||||
<li><a data-action="Twitter" data-label="footer" href="https://twitter.com/tuupola" class="icon-twitter-sign icon-large track"> Twitter</a></li>
|
||||
<li><a data-action="Google+" data-label="footer" href="https://plus.google.com/114333901699201512043?rel=author" class="icon-google-plus-sign icon-large track"> Google+</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-5 col-lg-4">
|
||||
Built using the awesome <a class="track" data-action="Designmodo" data-label="footer" style="color: #ffffff;" href="http://designmodo.com/flat/?u=583">Flat UI Pro</a> framework by Designmodo.
|
||||
<br><br>
|
||||
© 2013 Mika Tuupola.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="jquery.lazyload.js?v=1.9.1"></script>
|
||||
<script src="http://www.appelsiini.net/js/demo.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(function() {
|
||||
$("img.lazy").lazyload({container: $("#container")});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
lib/jquery_lazyload/img/bmw_m1_hood.jpg
Normal file
BIN
lib/jquery_lazyload/img/bmw_m1_hood.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
BIN
lib/jquery_lazyload/img/bmw_m1_side.jpg
Normal file
BIN
lib/jquery_lazyload/img/bmw_m1_side.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
lib/jquery_lazyload/img/bmw_m3_gt.jpg
Normal file
BIN
lib/jquery_lazyload/img/bmw_m3_gt.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
lib/jquery_lazyload/img/corvette_pitstop.jpg
Normal file
BIN
lib/jquery_lazyload/img/corvette_pitstop.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
lib/jquery_lazyload/img/grey.gif
Normal file
BIN
lib/jquery_lazyload/img/grey.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
BIN
lib/jquery_lazyload/img/transparent.gif
Normal file
BIN
lib/jquery_lazyload/img/transparent.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
BIN
lib/jquery_lazyload/img/viper_1.jpg
Normal file
BIN
lib/jquery_lazyload/img/viper_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
lib/jquery_lazyload/img/viper_corner.jpg
Normal file
BIN
lib/jquery_lazyload/img/viper_corner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
lib/jquery_lazyload/img/white.gif
Normal file
BIN
lib/jquery_lazyload/img/white.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
242
lib/jquery_lazyload/jquery.lazyload.js
Normal file
242
lib/jquery_lazyload/jquery.lazyload.js
Normal file
@ -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);
|
||||
}
|
||||
$("<img />")
|
||||
.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);
|
||||
2
lib/jquery_lazyload/jquery.lazyload.min.js
vendored
Normal file
2
lib/jquery_lazyload/jquery.lazyload.min.js
vendored
Normal file
@ -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("<img />").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);
|
||||
72
lib/jquery_lazyload/jquery.scrollstop.js
Normal file
72
lib/jquery_lazyload/jquery.scrollstop.js
Normal file
@ -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) );
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
2
lib/jquery_lazyload/jquery.scrollstop.min.js
vendored
Normal file
2
lib/jquery_lazyload/jquery.scrollstop.min.js
vendored
Normal file
@ -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))}}}();
|
||||
35
lib/jquery_lazyload/lazyload.jquery.json
Normal file
35
lib/jquery_lazyload/lazyload.jquery.json
Normal file
@ -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"
|
||||
]
|
||||
}
|
||||
37
lib/jquery_lazyload/package.json
Normal file
37
lib/jquery_lazyload/package.json
Normal file
@ -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 <tuupola@appelsiini.net>",
|
||||
"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"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user