++ +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. + +
+ +then in your code do: + +
$("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.
+
+h4. Install with "bower":http://bower.io
+
+$ bower install jquery.lazyload+ +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. diff --git a/lib/jquery_lazyload/CONTRIBUTING.md b/lib/jquery_lazyload/CONTRIBUTING.md new file mode 100644 index 0000000000..4a5fb22afc --- /dev/null +++ b/lib/jquery_lazyload/CONTRIBUTING.md @@ -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"); +} +``` diff --git a/lib/jquery_lazyload/Gruntfile.js b/lib/jquery_lazyload/Gruntfile.js new file mode 100644 index 0000000000..b0b5522474 --- /dev/null +++ b/lib/jquery_lazyload/Gruntfile.js @@ -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"]); + +}; \ No newline at end of file diff --git a/lib/jquery_lazyload/README.md b/lib/jquery_lazyload/README.md new file mode 100644 index 0000000000..a9626eeff6 --- /dev/null +++ b/lib/jquery_lazyload/README.md @@ -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 + + +``` + +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 +
+ All images are loaded. Page takes long time to load. Shift-reload to test again. + But wait there is more! You can also lazy load sideways or + gazillion images. +
+ +
+ Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down + they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page + where plugin is disabled, same page with + fadein effect, page with wide + layout or wide content inside container. +
+ +$("img.lazy").lazyload();
+ <img class="lazy" data-original="img/example.jpg" width="765" height="574">+ +
+ Images are loaded via AJAX(H) call after you click the container. Lazy Load + is applied in the callback. +
+
+ $("#container").one("click", function() {
+ $("#container").load("images.html", function(response, status, xhr) {
+ $("img.lazy").lazyload();
+ });
+ });
+ <img class="lazy" data-original="img/example.jpg" width="765" height="574">+
+ Here be dragons. +
+
+ <div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>
+
+ $("div.lazy").lazyload({
+ effect : "fadeIn"
+ });
+
+
+
+
+
+
+
+
+ + Images below the visible area (the ones lower than container bottom) are not loaded. When scrolling down + they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page where plugin is + disabled or same page with fadein effect. +
+
+$("img.lazy").lazyload({
+ effect : "fadeIn",
+ container: $("#container")
+});
+
+
+#container {
+ height: 600px;
+ overflow: scroll;
+}
+
+ <img class="lazy" data-original="img/example.jpg" width="765" height="574">+
+ Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down + they are loaded when needed. Images appear using fadeIn + effect. Empty cache and shift-reload to test again. Compare this to page where plugin is + without effects. +
+
+$("img.lazy").lazyload({
+ effect : "fadeIn"
+});
+
+ <img class="lazy" data-original="img/example.jpg" width="765" height="574">+
+ When you have hundreds of images it is best to use James Padolseys scrollstop event. + Compate this to page where plugin is disabled or page with + larger images. +
+ +<script src="jquery.scrollstop.js" type="text/javascript"></script>+
<img class="lazy" data-original="img/example.jpg" width="80" height="120" alt="">+
$("img.lazy").lazyload({
+ event: "scrollstop"
+});
+
+ + This page deprecates gracefully for non JavaScript browsers. It requires hiding + lazy loaded images with css and adding a <noscript> block which contains + the real image and it is shown when JavaScript is not enabled. If JavaScript is enabled + show() function is called before initializing Lazy Load plugin. +
+ +.lazy {
+ display: none;
+}
+
+ $("img.lazy").show().lazyload({
+ effect : "fadeIn"
+});
+
+ <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574"> + <noscript><img src="img/example.jpg" width="765" height="574"></noscript>+ +
+
+ + Here Lazy Load + plugin is enabled. Images below the fold are not loaded. Timeout will trigger five seconds after + all other elements of page have been loaded. +
+$(function() {
+ $("img.lazy").lazyload({
+ event : "sporty"
+ });
+});
+
+$(window).bind("load", function() {
+ var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);
+});
+
+ <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="765" height="574">+ +
+ Images right of the fold are not loaded. When scrolling left they are loaded when needed. + Shift-reload to test again. Compare this to page where plugin is + disabled or page with + gazillion images. +
+$("img.lazy").lazyload({
+ effect: "fadeIn"
+});
+ <img class="lazy" data-original="img/example.jpg" width="765" height="574">+ +
+ Images right of the visible area are not loaded. When scrolling left they are loaded when needed. + Shift-reload to test again. Compare this to page where plugin is + disabled or page with + gazillion images. +
+$("img.lazy").lazyload({
+ container: $("#container")
+});
+