Permalink
Browse files

Merge pull request #32 from vvo/experimental

Release V1.0.0
  • Loading branch information...
2 parents d7321c1 + 6584315 commit 8c9febec5878cd782bc0f0ff75c1eede7bc848a6 @vvo committed Dec 21, 2012
Showing with 1,258 additions and 10,158 deletions.
  1. +0 −119 .jshintrc
  2. +22 −0 LICENCE
  3. +22 −0 LICENCE.fasterize
  4. +37 −38 README.md
  5. +12 −0 TODO.md
  6. +209 −178 lazyload.js
  7. +9 −6 lazyload.min.js
  8. +2 −5 package.json
  9. +0 −14 test/14.html
  10. +0 −23 test/ajax-loaded-images-ondemand.html
  11. +0 −32 test/ajax-loaded-images.html
  12. +0 −30 test/ajax/images.html
  13. +0 −26 test/detached-below-the-fold.html
  14. +0 −51 test/double-script.html
  15. +0 −29 test/fast-domready.html
  16. +0 −65 test/getattribute.html
  17. +0 −9,404 test/jquery-1.7.2.js
  18. +0 −30 test/onload.html
  19. +0 −26 test/slow-domready.html
  20. +0 −41 test/test.html
  21. +0 −40 test/test_minified.html
  22. +69 −0 tests/ajax-loaded-images-ondemand.html
  23. +60 −0 tests/ajax-loaded-images.html
  24. +6 −0 tests/ajax/images.html
  25. 0 {test → tests}/ajax/lazyload.html
  26. +67 −0 tests/custom-container.html
  27. +45 −0 tests/detached-below-the-fold.html
  28. +3 −1 {test → tests}/detached-in-viewport.html
  29. +64 −0 tests/double-script.html
  30. +42 −0 tests/first-image-src.html
  31. +67 −0 tests/getattribute.html
  32. +59 −0 tests/horizontal.html
  33. BIN {test → tests}/imgs/1.jpg
  34. BIN {test → tests}/imgs/10.jpg
  35. BIN {test → tests}/imgs/11.jpg
  36. BIN {test → tests}/imgs/12.jpg
  37. BIN {test → tests}/imgs/13.jpg
  38. BIN {test → tests}/imgs/14.jpg
  39. BIN {test → tests}/imgs/15.jpg
  40. BIN {test → tests}/imgs/16.jpg
  41. BIN {test → tests}/imgs/17.jpg
  42. BIN {test → tests}/imgs/2.jpg
  43. BIN {test → tests}/imgs/3.jpg
  44. BIN {test → tests}/imgs/4.jpg
  45. BIN {test → tests}/imgs/5.jpg
  46. BIN {test → tests}/imgs/6.jpg
  47. BIN {test → tests}/imgs/7.jpg
  48. BIN {test → tests}/imgs/8.jpg
  49. BIN {test → tests}/imgs/9.jpg
  50. BIN {test → tests}/imgs/google-mail.jpg
  51. BIN {test → tests}/imgs/test-image.jpg
  52. +63 −0 tests/js/helper.js
  53. +2 −0 tests/js/jquery-1.8.3.js
  54. +59 −0 tests/minified.html
  55. +55 −0 tests/onload.html
  56. +63 −0 tests/slow-domready.html
  57. +84 −0 tests/target.html
  58. +78 −0 tests/test.css
  59. +59 −0 tests/vertical.html
View
119 .jshintrc
@@ -1,119 +0,0 @@
-{
- // --------------------------------------------------------------------
- // JSHint Configuration, Strict Edition
- // --------------------------------------------------------------------
- //
- // This is a options template for [JSHint][1], using [JSHint example][2]
- // and [Ory Band's example][3] as basis and setting config values to
- // be most strict:
- //
- // * set all enforcing options to true
- // * set all relaxing options to false
- // * set all environment options to false, except the browser value
- // * set all JSLint legacy options to false
- //
- // [1]: http://www.jshint.com/
- // [2]: https://github.com/jshint/node-jshint/blob/master/example/config.json
- // [3]: https://github.com/oryband/dotfiles/blob/master/jshintrc
- //
- // @author http://michael.haschke.biz/
- // @license http://unlicense.org/
-
- // == Enforcing Options ===============================================
- //
- // These options tell JSHint to be more strict towards your code. Use
- // them if you want to allow only a safe subset of JavaScript, very
- // useful when your codebase is shared with a big number of developers
- // with different skill levels.
-
- "bitwise" : true, // Prohibit bitwise operators (&, |, ^, etc.).
- "curly" : false, // Require {} for every new block or scope.
- "eqeqeq" : true, // Require triple equals i.e. `===`.
- "forin" : true, // Tolerate `for in` loops without `hasOwnPrototype`.
- "immed" : true, // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );`
- "latedef" : false, // Prohibit variable use before definition.
- "newcap" : true, // Require capitalization of all constructor functions e.g. `new F()`.
- "noarg" : true, // Prohibit use of `arguments.caller` and `arguments.callee`.
- "noempty" : true, // Prohibit use of empty blocks.
- "nonew" : true, // Prohibit use of constructors for side-effects.
- "plusplus" : false, // Allow use of `++` & `--`.
- "regexp" : true, // Prohibit `.` and `[^...]` in regular expressions.
- "undef" : true, // Require all non-global variables be declared before they are used.
- "strict" : false, // Do not Require `use strict` pragma in every file.
- "trailing" : true, // Prohibit trailing whitespaces.
-
- // == Relaxing Options ================================================
- //
- // These options allow you to suppress certain types of warnings. Use
- // them only if you are absolutely positive that you know what you are
- // doing.
-
- "asi" : true, // Tolerate Automatic Semicolon Insertion (no semicolons).
- "boss" : false, // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
- "debug" : false, // Allow debugger statements e.g. browser breakpoints.
- "eqnull" : false, // Tolerate use of `== null`.
- "es5" : true, // Allow EcmaScript 5 syntax.
- "esnext" : true, // Allow ES.next specific features such as `const` and `let`.
- "evil" : false, // Tolerate use of `eval`.
- "expr" : true, // Tolerate `ExpressionStatement` as Programs.
- "funcscope" : false, // Tolerate declarations of variables inside of control structures while accessing them later from the outside.
- "globalstrict" : false, // Allow global "use strict" (also enables 'strict').
- "iterator" : false, // Allow usage of __iterator__ property.
- "lastsemic" : false, // Tolerat missing semicolons when the it is omitted for the last statement in a one-line block.
- "laxbreak" : true, // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons.
- "laxcomma" : true, // Suppress warnings about comma-first coding style.
- "loopfunc" : false, // Allow functions to be defined within loops.
- "multistr" : false, // Tolerate multi-line strings.
- "onecase" : false, // Tolerate switches with just one case.
- "proto" : false, // Tolerate __proto__ property. This property is deprecated.
- "regexdash" : false, // Tolerate unescaped last dash i.e. `[-...]`.
- "scripturl" : false, // Tolerate script-targeted URLs.
- "smarttabs" : false, // Tolerate mixed tabs and spaces when the latter are used for alignmnent only.
- "shadow" : false, // Allows re-define variables later in code e.g. `var x=1; x=2;`.
- "sub" : true, // Tolerate all forms of subscript notation besides dot notation e.g. `dict['key']` instead of `dict.key`.
- "supernew" : false, // Tolerate `new function () { ... };` and `new Object;`.
- "validthis" : false, // Tolerate strict violations when the code is running in strict mode and you use this in a non-constructor function.
-
- // == Environments ====================================================
- //
- // These options pre-define global variables that are exposed by
- // popular JavaScript libraries and runtime environments—such as
- // browser or node.js.
-
- "browser" : true, // Standard browser globals e.g. `window`, `document`.
- "couch" : false, // Enable globals exposed by CouchDB.
- "devel" : false, // Allow development statements e.g. `console.log();`.
- "dojo" : false, // Enable globals exposed by Dojo Toolkit.
- "jquery" : false, // Enable globals exposed by jQuery JavaScript library.
- "mootools" : false, // Enable globals exposed by MooTools JavaScript framework.
- "node" : false, // Enable globals available when code is running inside of the NodeJS runtime environment.
- "nonstandard" : false, // Define non-standard but widely adopted globals such as escape and unescape.
- "prototypejs" : false, // Enable globals exposed by Prototype JavaScript framework.
- "rhino" : false, // Enable globals available when your code is running inside of the Rhino runtime environment.
- "wsh" : false, // Enable globals available when your code is running as a script for the Windows Script Host.
-
- // == JSLint Legacy ===================================================
- //
- // These options are legacy from JSLint. Aside from bug fixes they will
- // not be improved in any way and might be removed at any point.
-
- "nomen" : false, // Prohibit use of initial or trailing underbars in names.
- "onevar" : false, // Allow only one `var` statement per function.
- "passfail" : false, // Stop on first error.
- "white" : false, // Check against strict whitespace and indentation rules.
-
- // == Undocumented Options ============================================
- //
- // While I've found these options in [example1][2] and [example2][3]
- // they are not described in the [JSHint Options documentation][4].
- //
- // [4]: http://www.jshint.com/options/
-
- "maxerr" : 100, // Maximum errors before stopping.
- "predef" : [ // Extra globals.
- //"exampleVar",
- //"anotherCoolGlobal",
- //"iLoveDouglas"
- ],
- "indent" : 2 // Specify indentation spacing
-}
View
22 LICENCE
@@ -0,0 +1,22 @@
+(The MIT Licence)
+
+Copyright (c) 2012 Vincent Voyer, http://zeroload.net
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
@@ -0,0 +1,22 @@
+(The MIT Licence)
+
+Copyright (c) 2012 Vincent Voyer, http://fasterize.com
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
@@ -1,43 +1,45 @@
-# lazyload
+# Lazyload
-This image lazyloader is designed to help you save http requests on images.
+An image lazyloader is designed to save requests on page loading (#webperf)
Most of the time, when you have 100 images on a page, your user doesn't need them all.
This lazyloader will only load what is necessary.
-It's a standalone script that weights ~1KB minified gzipped.
-
-## Using it in your project, website or any application
-
-You should use the `lazyload.min.js` file from this repo. It has a line with [licence](#Licence) information in it that is mandatory.
-
-It helps us to be rewarded for our work and you to always have a link to this project.
+It's a standalone script that weights 1398 bytes minified gzipped.
## How to use
-1. Add lazyload.min.js to your page before any `<script>` tag, either src or inline if
-you do not have any other scripts in the `<head>`.
-2. Change all `<img>` tags to lazyload :
-
```html
- <img
- data-src="real/image/src.jpg"
- src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
- onload=lzld(this) onerror=lzld(this) />
+<!doctype html>
+<html>
+ <head>
+ <title></title>
+ <!-- in your concatenated bundle, inlined, alone and external -->
+ <script src="lazyload.min.js"></script>
+ <script>
+ // For best results, initialize now
+ window.lzld = (new Lazyload).lzld;
+ </script>
+ <!-- your scripts goes here -->
+ </head>
+ <body>
+ <img
+ data-src="real/image/src.jpg"
+ src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
+ onload=lzld(this) onerror=lzld(this) />
+ </body>
+</html>
```
-3. Enjoy
-
-## Production ready? Yes.
-
-Is it safe to use this piece of software? Don't trust us, trust them:
-* [www.lemonde.fr](http://www.lemonde.fr/) & [mobile.lemonde.fr](http://mobile.lemonde.fr/), news, [top5](http://www.ojd-internet.com/chiffres-internet/) desktop website in France, [1st](http://www.mediametrie.fr/internet/communiques/telecharger.php?f=26408ffa703a72e8ac0117e74ad46f33)(pdf)mobile website in France.
-* [rue89.com](http://www.rue89.com/), news, 40 millions page views per month. [source](http://www.ojd-internet.com/chiffres-internet/7851-rue89.com)
-* [playtv.fr](http://playtv.fr/), tv guide, millions of page views per month. [source](http://www.mediametrie.fr/internet/communiques/telecharger.php?f=26408ffa703a72e8ac0117e74ad46f33) (pdf)
+## Features
-They all use lazyload for production websites and are happy with it. Customers told us that
-they *cut page download size by 2*!
+* Cut onload time, page size, number of request by 2x, 3x? Depends on your website
+* Horizontal and vertical (scroll) lazy loading of images
+* Custom container (default to document.body)
+* Many edge cases covered (like slow domready)
+* Has tests/
+* Production ready: YES. Used on major websites like [lemonde](http://www.lemonde.fr), [rue89](http://www.rue89.com), [playtv](http://playtv.fr), [voyages-sncf](http://www.voyages-sncf.com)
## Why another lazyload plugin
@@ -58,10 +60,6 @@ You can have IE6/7 support without the hack, use the `b.gif` image instead of th
## How does it works
-We built our lazyloader with efficiency and speed in mind.
-
-Many cases are handled, see test/.
-
We watch the domready event.
But if it takes too much time to fire, we use the `<img onload=lzld(this)` fallback that will fire before the domready event.
@@ -71,25 +69,26 @@ Scroll and resize events are throttled so that we do not run too often.
Adding to the `<head>` is mandatory otherwise we could not show images as fast as we want.
And we would not be the first script to register to the domready event.
-The base 64 src should be the smallest possible it is from http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
+The base 64 src should be the smallest possible.
+Reference: http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
-Do not worry about the size overhead of adding a lot of base 64 src images to your page :
+Don't worry about the size overhead of adding a lot of base 64 src images to your page :
GZIP is here to help (http://www.gzip.org/deflate.html).
-## Contact
-
-If you want to automatically add lazyload to your website, contact us at http://fasterize.com
-
## CMS integration
* [Drupal](http://drupal.org/project/lazyload), thanks to https://twitter.com/#!/cirotix
* your favorite CMS: do it!
+## Automate
+
+If you want to automatically add lazyload to your website, contact http://fasterize.com
+
## Licence
(The MIT Licence)
-Copyright (c) 2012 Vincent Voyer, http://fasterize.com
+Copyright (c) 2012 Vincent Voyer, http://zeroload.net http://fasterize.com
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
View
12 TODO.md
@@ -17,3 +17,15 @@ function elementInViewport(el) {
- Add IE6/IE7 support ? + Test
- Add "used by" section in README
- Provide fallback for users w/o JS ?
+
+---
+
+Failing tests: create issues with possible ways
+Auto start option
+RESIZE EVENT must showimages, add failing test
+Be able to give multiple data srcs
+Provide callback to choose the data src
+Provide callback to choose how to show the image (add fadeIn example)
+Show example using a spinner then fadeIn
+Update github pages, create beautifull one with all examples and features
+Double script fails sur IE
Oops, something went wrong.

0 comments on commit 8c9febe

Please sign in to comment.