├── CHANGELOG.md ├── LICENSE.txt ├── README.md ├── bower.json ├── build └── jquery.lazyload-any.min.js ├── package.json ├── samples ├── images │ ├── images │ │ ├── aquaman.jpg │ │ ├── batman.png │ │ ├── flash.jpg │ │ ├── green-lantern.png │ │ ├── martian-manhunter.jpg │ │ ├── superman.jpg │ │ └── wonder-woman.jpg │ ├── index.html │ └── style.css ├── overflow │ ├── images │ │ ├── aquaman.jpg │ │ ├── batman.png │ │ ├── flash.jpg │ │ ├── green-lantern.png │ │ ├── martian-manhunter.jpg │ │ ├── superman.jpg │ │ └── wonder-woman.jpg │ ├── index.html │ └── style.css └── youtube │ ├── index.html │ ├── play-hover.png │ ├── play.png │ └── style.css ├── src └── jquery.lazyload-any.js └── tests ├── index.html └── style.css /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## v0.3.1 / 2017-11-25 4 | ### Fixed 5 | - package.json typo #24 6 | 7 | ## v0.3.0 / 2016-02-17 8 | ### Added 9 | - data-lazyload attribute to load content. 10 | - script type="text/lazyload" to load content. 11 | - Supported text content. 12 | 13 | ## v0.2.3 / 2014-10-21 14 | ### Added 15 | - refresh method for element move. 16 | 17 | ### Fixed 18 | - JSHint warnings. 19 | 20 | ## v0.2.2 / 2014-10-21 21 | ### Imporved 22 | - performance. 23 | 24 | ### Changed 25 | - Enable event if document is not ready. 26 | 27 | ## v0.2.1 / 2014-10-21 28 | ### Imporved 29 | - performance. 30 | 31 | ### Fixed 32 | - trim bug in older browsers. 33 | 34 | ## v0.2.0 / 2014-10-12 35 | ### Added 36 | - Support overflow div. 37 | - Support display none and show. 38 | 39 | ## v0.1.9 / 2014-09-23 40 | ### Added 41 | - Bind resize and scroll events only on demand. 42 | 43 | ## v0.1.8 / 2014-07-27 44 | ### Added 45 | - Support for jquery 1.6.4 46 | 47 | ## v0.1.7 / 2014-07-01 48 | ### Added 49 | - Support for jquery 1.9.1 50 | 51 | ## v0.1.6 / 2014-04-29 52 | ### Added 53 | - detection when initializing. 54 | 55 | ## v0.1.5 / 2014-04-24 56 | ### Added 57 | - Support older version jQuery(test 1.6.4). 58 | 59 | ## v0.1.4 / 2014-02-04 60 | ### Fixed 61 | - Rewrite to avoid event listener lost. 62 | 63 | ## v0.1.3 / 2014-02-03 64 | ### Added 65 | - trigger option. 66 | 67 | ## v0.1.2 / 2014-01-28 68 | ### Added 69 | - load callback. 70 | 71 | ## v0.1.1 / 2014-01-22 72 | ### Added 73 | - x-axis detection. 74 | - threshold. 75 | 76 | ## v0.1.0 / 2014-01-19 77 | ### Added 78 | - Initial release 79 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014-2017 Yi-Cyuan Chen 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery-lazyload-any 2 | A jQuery plugin provides a lazyload function for images, iframe or anything. 3 | [![NPM](https://nodei.co/npm/jquery-lazyload-any.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/jquery-lazyload-any) 4 | 5 | ## Demo 6 | [Images](http://emn178.github.io/jquery-lazyload-any/samples/images/) ([Overflow and Tabs](http://emn178.github.io/jquery-lazyload-any/samples/overflow/)) 7 | [Youtube](http://emn178.github.io/jquery-lazyload-any/samples/youtube/) 8 | 9 | ## Download 10 | [Compress](https://raw.github.com/emn178/jquery-lazyload-any/master/build/jquery.lazyload-any.min.js) 11 | [Uncompress](https://raw.github.com/emn178/jquery-lazyload-any/master/src/jquery.lazyload-any.js) 12 | 13 | ## Installation 14 | You can install jquery-lazyload-any by using Bower. 15 | 16 | bower install jquery-lazyload-any 17 | 18 | For node.js, you can use this command to install: 19 | 20 | npm install jquery-lazyload-any 21 | 22 | ## Usage 23 | HTML 24 | *Attribute Style* 25 | ```HTML 26 |
27 |
28 | ``` 29 | *Script Style* 30 | ```HTML 31 |
32 | 35 |
36 | ``` 37 | *Comment Style* 38 | ```HTML 39 |
40 | 43 |
44 | ``` 45 | JavaScript 46 | ```JavaScript 47 | $('#you-want-lazyload').lazyload(options); 48 | ``` 49 | You should choose only one style. When multiple styles set, priority is Attribute > Script > Comment. 50 | 51 | ### Options 52 | #### *threshold: `Number` (default: `0`)* 53 | 54 | Sets the pixels to load earlier. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport. It should be greater or equal zero. 55 | 56 | #### *load: `Function(element)` (default: `undefined`)* 57 | 58 | Sets the callback function when the load event is firing. 59 | 60 | `element`: The content in lazyload tag will be returned as a jQuery object. 61 | 62 | #### *trigger: `String` (default: `"appear"`)* 63 | 64 | Sets events to trigger lazyload. Default is customized event `appear`, it will trigger when element appear in screen. You could set other events including each one separated by a space, ex: `mousedown touchstart`. 65 | 66 | ### Methods 67 | 68 | #### $.lazyload.check() 69 | 70 | Force to trigger detection event. 71 | 72 | #### $.lazyload.setInterval(inverval) 73 | 74 | Set interval of timer that check container display status. 75 | 76 | ##### *inverval: `Number` (default: `50`)* 77 | 78 | Interval of timer. Set 0 to disable timer, and you can use `$.lazyload.check()` to trigger detection manually. 79 | 80 | #### $.lazyload.refresh(selector) 81 | 82 | Refresh status of elements bound event. Element will bind scroll event to parent scrollable automatically when initializing as lazyload. If you move element, you should use this method to bind again. 83 | 84 | ##### *selector: `String` or `Object` (default: `undefined`)* 85 | 86 | The elements that you want to refresh. It will refresh all lazyload elements if you don't pass this parameter. 87 | 88 | ### Notice 89 | * You should initialize after the element add to page. Or it can't detect whether it's in screen. If you do that, you still can use `$.lazyload.check()` to force detection. 90 | * Detection uses jQuery `element.is(':visible')`, it will return false if element's width and height are equal to zero. So you have to make sure the lazyload element with any width or height. 91 | 92 | ## Example 93 | HTML 94 | ```HTML 95 |
96 | 99 |
100 | ``` 101 | JavaScript 102 | ```JavaScript 103 | $('.lazyload').lazyload({ 104 | // Sets the pixels to load earlier. Setting threshold to 200 causes image to load 200 pixels 105 | // before it appears on viewport. It should be greater or equal zero. 106 | threshold: 200, 107 | 108 | // Sets the callback function when the load event is firing. 109 | // element: The content in lazyload tag will be returned as a jQuery object. 110 | load: function(element) {}, 111 | 112 | // Sets events to trigger lazyload. Default is customized event `appear`, it will trigger when 113 | // element appear in screen. You could set other events including each one separated by a space. 114 | trigger: "appear" 115 | }); 116 | ``` 117 | 118 | ## License 119 | The project is released under the [MIT license](http://www.opensource.org/licenses/MIT). 120 | 121 | ## Contact 122 | The project's website is located at https://github.com/emn178/jquery-lazyload-any 123 | Author: Yi-Cyuan Chen (emn178@gmail.com) 124 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-lazyload-any", 3 | "version": "0.3.1", 4 | "main": ["src/jquery.lazyload-any.js"], 5 | "ignore": [ 6 | "samples", 7 | "tests" 8 | ], 9 | "dependencies": { 10 | "jquery": ">= 1.6" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /build/jquery.lazyload-any.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * [jQuery-lazyload-any]{@link https://github.com/emn178/jquery-lazyload-any} 3 | * 4 | * @version 0.3.1 5 | * @author Yi-Cyuan Chen [emn178@gmail.com] 6 | * @copyright Yi-Cyuan Chen 2014-2016 7 | * @license MIT 8 | */ 9 | (function(d,k,l){function m(){var a=d(this),c;if(c=a.is(":visible")){c=a[0].getBoundingClientRect();var b=-a.data("jquery-lazyload-any").threshold,e=n-b,f=p-b;c=(c.top>=b&&c.top<=e||c.bottom>=b&&c.bottom<=e)&&(c.left>=b&&c.left<=f||c.right>=b&&c.right<=f)}c&&a.trigger("appear")}function q(){n=k.innerHeight||l.documentElement.clientHeight;p=k.innerWidth||l.documentElement.clientWidth;g()}function g(){h=h.filter(":jquery-lazyload-any-appear");1==this.nodeType?d(this).find(":jquery-lazyload-any-appear").each(m): 10 | h.each(m)}function v(){var a=d(this),c=a.data("jquery-lazyload-any"),b=a.data("lazyload");b||(b=a.children().filter('script[type="text/lazyload"]').get(0),b=d(b).html());b||(b=(b=a.contents().filter(function(){return 8===this.nodeType}).get(0))&&d.trim(b.data));b=w.html(b).contents();a.replaceWith(b);d.isFunction(c.load)&&c.load.call(b,b)}function r(){var a=d(this),c;a.data("jquery-lazyload-any-scroller")?c=!1:(c=a.css("overflow"),"scroll"!=c&&"auto"!=c?c=!1:(a.data("jquery-lazyload-any-scroller", 11 | 1),a.bind("scroll",g),c=!0));var b;a.data("jquery-lazyload-any-display")?b=void 0:"none"!=a.css("display")?b=void 0:(a.data("jquery-lazyload-any-display",1),a._bindShow(g),b=!0);c|b&&!a.data("jquery-lazyload-any-watch")&&(a.data("jquery-lazyload-any-watch",1),a.bind("appear",t))}function t(){var a=d(this);0===a.find(":jquery-lazyload-any-appear").length&&(a.removeData("jquery-lazyload-any-scroller").removeData("jquery-lazyload-any-display").removeData("jquery-lazyload-any-watch"),a.unbind("scroll", 12 | g).unbind("appear",t)._unbindShow(g))}var w=d("
"),n,p,u=!1,h=d();d.expr[":"]["jquery-lazyload-any-appear"]=function(a){return void 0!==d(a).data("jquery-lazyload-any-appear")};d.fn.lazyload=function(a){var c={threshold:0,trigger:"appear"};d.extend(c,a);a=c.trigger.split(" ");this.data("jquery-lazyload-any-appear",-1!=d.inArray("appear",a)).data("jquery-lazyload-any",c);this.bind(c.trigger,v);this.each(m);this.parents().each(r);this.each(function(){h=h.add(this)});u||(u=!0,q(),d(l).ready(function(){d(k).bind("resize", 13 | q).bind("scroll",g)}));return this};d.lazyload={check:g,refresh:function(a){(void 0===a?h:d(a)).each(function(){var a=d(this);a.is(":jquery-lazyload-any-appear")&&a.parents().each(r)})}};(function(){function a(){var a=d(this),b="none"!=a.css("display");a.data("jquery-lazyload-any-show")!=b&&(a.data("jquery-lazyload-any-show",b),b&&a.trigger("show"))}function c(){f=f.filter(":jquery-lazyload-any-show");f.each(a);0===f.length&&(e=clearInterval(e))}var b=50,e,f=d();d.expr[":"]["jquery-lazyload-any-show"]= 14 | function(a){return void 0!==d(a).data("jquery-lazyload-any-show")};d.fn._bindShow=function(a){this.bind("show",a);this.data("jquery-lazyload-any-show","none"!=this.css("display"));f=f.add(this);b&&!e&&(e=setInterval(c,b))};d.fn._unbindShow=function(a){this.unbind("show",a);this.removeData("jquery-lazyload-any-show")};d.lazyload.setInterval=function(a){a==b||!d.isNumeric(a)||0>a||(b=a,e=clearInterval(e),0", 16 | "homepage": "https://github.com/emn178/jquery-lazyload-any", 17 | "bugs": { 18 | "url": "https://github.com/emn178/jquery-lazyload-any/issues" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /samples/images/images/aquaman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/images/images/aquaman.jpg -------------------------------------------------------------------------------- /samples/images/images/batman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/images/images/batman.png -------------------------------------------------------------------------------- /samples/images/images/flash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/images/images/flash.jpg -------------------------------------------------------------------------------- /samples/images/images/green-lantern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/images/images/green-lantern.png -------------------------------------------------------------------------------- /samples/images/images/martian-manhunter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/images/images/martian-manhunter.jpg -------------------------------------------------------------------------------- /samples/images/images/superman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/images/images/superman.jpg -------------------------------------------------------------------------------- /samples/images/images/wonder-woman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/images/images/wonder-woman.jpg -------------------------------------------------------------------------------- /samples/images/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lazyload Images 6 | 7 | 8 | 9 | 10 | 21 | 22 | 23 | 27 |
28 |
29 |

30 | Images will be loaded when they show in the screen. 31 |

32 |

33 | Scroll down to see the effect. 34 |

35 |
36 |
37 |

HTML

38 |
 39 |         <div class="lazyload batman" >
 40 |           <!--
 41 |           <img src="images/batman.png" class="batman" />
 42 |           -->
 43 |         </div>
 44 |       
45 |

JavaScript

46 |
 47 |         function load(img)
 48 |         {
 49 |           img.fadeOut(0, function() {
 50 |             img.fadeIn(1000);
 51 |           });
 52 |         }
 53 |         $('.lazyload').lazyload({load: load});
 54 |       
55 |
56 |
57 |
58 |

Batman

59 |
60 | 63 |
64 |

65 | Batman is a fictional character, a comic book superhero appearing in comic books published by DC Comics. Batman was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 (May 1939). Originally referred to as "the Bat-Man" and still referred to at times as "the Batman," the character is additionally known as "the Caped Crusader,"[5] "the Dark Knight,"[5] and "the World's Greatest Detective,"[5] among other titles. 66 |

67 |

68 | Batman is the secret identity of Bruce Wayne, an American billionaire womanizer, industrialist, and philanthropist. Having witnessed the murder of his parents as a child, he swore revenge on criminals, an oath tempered with the greater ideal of justice. Wayne trains himself both physically and intellectually and dons a bat-themed costume in order to fight crime.[6] Batman operates in the fictional Gotham City, assisted by various supporting characters including his crime-fighting partner, Robin, his butler Alfred Pennyworth, the police commissioner Jim Gordon, and occasionally the heroine Batgirl. He fights an assortment of villains, often referred to as the "rogues gallery," which includes the Joker, the Penguin, the Riddler, Two-Face, Ra's al Ghul, Scarecrow, Poison Ivy, and Catwoman, among many others. Unlike most superheroes, he does not possess any superpowers; he makes use of intellect, detective skills, science and technology, wealth, physical prowess, martial arts skills, an indomitable will, fear, and intimidation in his continuous war on crime. 69 |

70 |

71 | Batman became a very popular character soon after his introduction and gained his own comic book title, Batman, in 1940. As the decades wore on, differing interpretations of the character emerged. The late 1960s Batman television series used a camp aesthetic which continued to be associated with the character for years after the show ended. Various creators worked to return the character to his dark roots, with varying results. The comic books of this dark stage culminated in the acclaimed 1986 miniseries The Dark Knight Returns, by Frank Miller, as well as Batman: The Killing Joke by Alan Moore and Arkham Asylum: A Serious House on Serious Earth by Grant Morrison, among others. The overall success of Warner Bros.' live-action Batman feature films have also helped maintain public interest in the character.[7] 72 |

73 |

74 | An American cultural icon, Batman has been licensed and adapted into a variety of media, from radio to television and film, and appears on a variety of merchandise sold all over the world such as toys and video games. The character has also intrigued psychiatrists with many trying to understand the character's psyche and his true ego in society. In May 2011, Batman placed second on IGN's Top 100 Comic Book Heroes of All Time,[8] after Superman. Empire magazine also listed him second in their 50 Greatest Comic Book Characters of All Time. 75 |

76 |

77 | The character has been portrayed in films by Lewis Wilson, Robert Lowery, Adam West, Michael Keaton, Val Kilmer, George Clooney, Christian Bale, and soon by Ben Affleck. 78 |

79 |
80 |
81 |

Superman

82 |
83 | 86 |
87 |

88 | Superman is a fictional character, a superhero that appears in comic books published by DC Comics, and is considered an American cultural icon.[1][2][3][4] Superman was created by writer Jerry Siegel and artist Joe Shuster, high school students living in Cleveland, Ohio, in 1933; the character was sold to Detective Comics, Inc. (later DC Comics) in 1938.[5][6] Superman first appeared in Action Comics #1 (June 1938) and subsequently appeared in various radio serials, television programs, films, newspaper strips, and video games. With the success of his adventures, Superman helped to create the superhero genre and establish its primacy within the American comic book.[1] 89 |

90 |

91 | Superman's appearance is distinctive and iconic. He usually wears a blue costume, red cape, and stylized red-and-yellow "S" shield on his chest.[7][8][9] This shield is used in a myriad of media to symbolize the character.[10] 92 |

93 |

94 | The origin story of Superman relates that he was born Kal-El on the planet Krypton, before being rocketed to Earth as an infant by his scientist father Jor-El, moments before Krypton's destruction. Discovered and adopted by a Kansas farmer and his wife, the child is raised as Clark Kent and imbued with a strong moral compass. Very early on he started to display superhuman abilities, which upon reaching maturity, he resolved to use for the benefit of humanity. Superman resides and operates in the fictional American city of Metropolis. As Clark Kent, he is a journalist for the Daily Planet, a Metropolis newspaper. Superman's primary love interest is Lois Lane and his archenemy is supervillain Lex Luthor.[11] Superman has fascinated scholars, with cultural theorists, commentators, and critics alike exploring the character's impact and role in the United States and worldwide. The character's ownership has often been the subject of dispute, with Siegel and Shuster twice suing for the return of legal ownership. Superman has been labeled as one of the greatest comic book heroes of all time.[12] 95 |

96 |
97 |
98 |

Wonder Woman

99 |
100 | 103 |
104 |

105 | Wonder Woman is a superheroine created by American psychologist and writer William Moulton Marston and published by DC Comics. The character first appeared in All Star Comics #8 in December 1941 and first cover-dated on Sensation Comics #1, January 1942. The Wonder Woman title has been published by DC Comics almost continuously except for a brief hiatus in 1986.[1] Her depiction as a heroine fighting for justice, love, peace, and sexual equality has led to Wonder Woman being widely considered a feminist icon.[2][3][4] Wonder Woman is a warrior princess of the Amazons (based on the Amazons of Greek mythology) and is known in her homeland as Princess Diana of Themyscira. When outside her homeland incognito, she is sometimes known by the secret identity Diana Prince. She is gifted with a wide range of superhuman powers and superior combat and battle skills. She possesses an arsenal of weapons, including the Lasso of Truth, a pair of indestructible bracelets, a tiara which serves as a projectile, and, in some stories, an invisible airplane. 106 |

107 |

108 | Created during World War II, the character was initially depicted fighting the Axis military forces, as well as an assortment of supervillains. Since then, Wonder Woman has gained a formidable cast of enemies bent on eliminating the Amazon, including classic villains such as Cheetah, Ares and Circe and newer ones like Genocide and The Circle, as well as many gods and monsters from Greek mythology. Wonder Woman has also regularly appeared in comic books featuring the superhero teams Justice Society (from 1941) and Justice League (from 1960).[5] 109 |

110 |

111 | In addition to the comics, the character has appeared in other media; most notably, the 1975–1979 Wonder Woman TV series starring Lynda Carter, as well as animated series such as the Super Friends and Justice League. Since Carter's Wonder Woman however, studios struggled to introduce a new live-action Wonder Woman to audiences, although the character continued to feature in a variety of toys and merchandise, as well as animated adaptations of DC properties, including a animated featuree. Attempts to return Wonder Woman to television have included a pilot for NBC in 2011, closely followed by another stalled production for The CW.[6][7] In 2013 however, it was announced that actress Gal Gadot would portray Wonder Woman in the upcoming untitled Man of Steel sequel.[8] 112 |

113 |
114 |
115 |

Flash

116 |
117 | 120 |
121 |

122 | The Flash (Bartholomew Henry "Barry" Allen) is a fictional character, a superhero in the DC Comics universe. He is the second character known as the Flash. The character first appeared in Showcase #4 (Oct. 1956), created by writers Robert Kanigher and John Broome and penciler Carmine Infantino.[1] His name combines talk show hosts Barry Gray and Steve Allen.[2] His death in 1985 removed the character from the regular DC lineup for 23 years. His return to regular comics occurred in 2008 within the pages of Grant Morrison's Final Crisis limited series. 123 |

124 |
125 |
126 |

Green Lantern

127 |
128 | 131 |
132 |

133 | Harold "Hal" Jordan is a DC Comics superhero known as Green Lantern, the first human shown to join the Green Lantern Corps and a founding member of the Justice League of America. Jordan is the second DC Comics character to adopt the Green Lantern moniker. Jordan was created in the Silver Age of Comic Books by John Broome and Gil Kane, and made his first appearance in Showcase #22 (October 1959) to replace the original Green Lantern Alan Scott from the Golden Age of Comic Books.[1] 134 |

135 |

136 | In 1994, the story Emerald Twilight saw Hal Jordan turn into the supervillain Parallax. Later, in the Zero Hour miniseries, he attempts cosmic genocide. He was replaced by Kyle Rayner as the new Green Lantern for the Modern Age of Comic Books. In the 1996 crossover story "The Final Night", he attempted to return to his heroic roots by dying to save the Earth, and later returned as a spirit of redemption in the persona of the Spectre. Hal Jordan was resurrected in the 2004 miniseries Green Lantern: Rebirth, which revealed that Parallax was actually an alien parasitic entity that influenced his prior villainy. He subsequently returned to the Green Lantern Corps and became the protagonist of the subsequent volumes of Green Lantern. 137 |

138 |

139 | Hal Jordan was ranked 7th on IGN's Top 100 Comic Book Heroes in 2011.[2] 140 |

141 |
142 |
143 |

Martian Manhunter

144 |
145 | 148 |
149 |

150 | The Martian Manhunter (J'onn J'onzz) is a fictional character, a superhero that appears in comic books published by DC Comics. Created by writer Joseph Samachson and artist Joe Certa, the character first appeared in Detective Comics #225 "The Manhunter From Mars" in August–September 1953.[1] The character is known for being one of the core members of the Justice League of America (JLA). 151 |

152 |

153 | J'onn J'onzz has featured in other DC Comics-endorsed products, such as video games, television series, animated films, or merchandise like action figures and trading cards. 154 |

155 |
156 |
157 |

Aquaman

158 |
159 | 162 |
163 |

164 | Aquaman is a superhero who stars in comic book titles by DC Comics. Created by Paul Norris and Mort Weisinger, the character debuted in More Fun Comics #73 (November 1941).[1] Initially a backup feature in DC's anthology titles, Aquaman later starred in several volumes of a solo title. During the late 1950s and 1960s superhero-revival period known as the Silver Age, he was a founding member of the Justice League of America. In the 1990s Modern Age, Aquaman's character became more serious than in most previous interpretations, with storylines depicting the weight of his role as king of Atlantis.[2] Later accounts reconciled both facets of the character, casting Aquaman as serious and broody, saddled with an ill reputation and struggling to find a true role and purpose beyond his public side as a deposed king and a fallen hero.[3] 165 |

166 |
167 |
168 |
169 | 172 | 181 | 182 | 183 | 184 | 185 | 186 | 189 | 190 | 191 | -------------------------------------------------------------------------------- /samples/images/style.css: -------------------------------------------------------------------------------- 1 | body, html, h1, h2 { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Roboto Slab', serif; 5 | } 6 | 7 | #header { 8 | background-color: #2d2d2d; 9 | color: white; 10 | text-align: center; 11 | } 12 | 13 | #description { 14 | margin: 20px; 15 | text-align: center; 16 | font-size: 20px; 17 | } 18 | 19 | .section-title { 20 | background-color: #2d2d2d; 21 | color: white; 22 | text-align: center; 23 | } 24 | 25 | .section { 26 | overflow: auto; 27 | } 28 | 29 | #footer { 30 | margin-top: 40px; 31 | padding-top: 40px; 32 | padding-bottom: 40px; 33 | font-size: 12px; 34 | line-height: 1.5; 35 | color: #777; 36 | border-top: 1px solid #eee; 37 | text-align: center; 38 | } 39 | 40 | .lazyload { 41 | background-color: black; 42 | display: inline-block; 43 | } 44 | 45 | .batman { 46 | float: left; 47 | width: 250px; 48 | height: 401px; 49 | margin: 10px; 50 | } 51 | 52 | .superman { 53 | float: right; 54 | width: 250px; 55 | height: 384px; 56 | margin: 10px; 57 | } 58 | 59 | .wonder-woman { 60 | float: left; 61 | width: 250px; 62 | height: 375px; 63 | margin: 10px; 64 | } 65 | 66 | .flash { 67 | float: right; 68 | width: 236px; 69 | height: 450px; 70 | margin: 10px; 71 | } 72 | 73 | .green-lantern { 74 | float: left; 75 | width: 250px; 76 | height: 336px; 77 | margin: 10px; 78 | } 79 | 80 | .martian-manhunter { 81 | float: right; 82 | width: 162px; 83 | height: 448px; 84 | margin: 10px; 85 | } 86 | 87 | .aquaman { 88 | float: left; 89 | width: 250px; 90 | height: 381px; 91 | margin: 10px; 92 | } 93 | 94 | #code-block { 95 | margin: 10px auto; 96 | width: 80%; 97 | } 98 | 99 | #code-block h3 { 100 | text-align: center; 101 | } -------------------------------------------------------------------------------- /samples/overflow/images/aquaman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/overflow/images/aquaman.jpg -------------------------------------------------------------------------------- /samples/overflow/images/batman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/overflow/images/batman.png -------------------------------------------------------------------------------- /samples/overflow/images/flash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/overflow/images/flash.jpg -------------------------------------------------------------------------------- /samples/overflow/images/green-lantern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/overflow/images/green-lantern.png -------------------------------------------------------------------------------- /samples/overflow/images/martian-manhunter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/overflow/images/martian-manhunter.jpg -------------------------------------------------------------------------------- /samples/overflow/images/superman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/overflow/images/superman.jpg -------------------------------------------------------------------------------- /samples/overflow/images/wonder-woman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/overflow/images/wonder-woman.jpg -------------------------------------------------------------------------------- /samples/overflow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Overflow and Tabs 6 | 7 | 8 | 9 | 10 | 11 | 12 | 23 | 24 | 25 | 29 |
30 |
31 |

32 | Images will be loaded when they show in the screen. 33 |

34 |

35 | Scroll down to see the effect. 36 |

37 |
38 |
39 |

HTML

40 |
 41 |         <div class="lazyload batman" >
 42 |           <!--
 43 |           <img src="images/batman.png" class="batman" />
 44 |           -->
 45 |         </div>
 46 |       
47 |

JavaScript

48 |
 49 |         function load(img)
 50 |         {
 51 |           img.fadeOut(0, function() {
 52 |             img.fadeIn(1000);
 53 |           });
 54 |         }
 55 |         $('.lazyload').lazyload({load: load});
 56 |       
57 |
58 |
59 | 63 |
64 |
65 |

Batman

66 |
67 | 70 |
71 |

72 | Batman is a fictional character, a comic book superhero appearing in comic books published by DC Comics. Batman was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 (May 1939). Originally referred to as "the Bat-Man" and still referred to at times as "the Batman," the character is additionally known as "the Caped Crusader,"[5] "the Dark Knight,"[5] and "the World's Greatest Detective,"[5] among other titles. 73 |

74 |

75 | Batman is the secret identity of Bruce Wayne, an American billionaire womanizer, industrialist, and philanthropist. Having witnessed the murder of his parents as a child, he swore revenge on criminals, an oath tempered with the greater ideal of justice. Wayne trains himself both physically and intellectually and dons a bat-themed costume in order to fight crime.[6] Batman operates in the fictional Gotham City, assisted by various supporting characters including his crime-fighting partner, Robin, his butler Alfred Pennyworth, the police commissioner Jim Gordon, and occasionally the heroine Batgirl. He fights an assortment of villains, often referred to as the "rogues gallery," which includes the Joker, the Penguin, the Riddler, Two-Face, Ra's al Ghul, Scarecrow, Poison Ivy, and Catwoman, among many others. Unlike most superheroes, he does not possess any superpowers; he makes use of intellect, detective skills, science and technology, wealth, physical prowess, martial arts skills, an indomitable will, fear, and intimidation in his continuous war on crime. 76 |

77 |

78 | Batman became a very popular character soon after his introduction and gained his own comic book title, Batman, in 1940. As the decades wore on, differing interpretations of the character emerged. The late 1960s Batman television series used a camp aesthetic which continued to be associated with the character for years after the show ended. Various creators worked to return the character to his dark roots, with varying results. The comic books of this dark stage culminated in the acclaimed 1986 miniseries The Dark Knight Returns, by Frank Miller, as well as Batman: The Killing Joke by Alan Moore and Arkham Asylum: A Serious House on Serious Earth by Grant Morrison, among others. The overall success of Warner Bros.' live-action Batman feature films have also helped maintain public interest in the character.[7] 79 |

80 |

81 | An American cultural icon, Batman has been licensed and adapted into a variety of media, from radio to television and film, and appears on a variety of merchandise sold all over the world such as toys and video games. The character has also intrigued psychiatrists with many trying to understand the character's psyche and his true ego in society. In May 2011, Batman placed second on IGN's Top 100 Comic Book Heroes of All Time,[8] after Superman. Empire magazine also listed him second in their 50 Greatest Comic Book Characters of All Time. 82 |

83 |

84 | The character has been portrayed in films by Lewis Wilson, Robert Lowery, Adam West, Michael Keaton, Val Kilmer, George Clooney, Christian Bale, and soon by Ben Affleck. 85 |

86 |
87 |
88 |

Superman

89 |
90 | 93 |
94 |

95 | Superman is a fictional character, a superhero that appears in comic books published by DC Comics, and is considered an American cultural icon.[1][2][3][4] Superman was created by writer Jerry Siegel and artist Joe Shuster, high school students living in Cleveland, Ohio, in 1933; the character was sold to Detective Comics, Inc. (later DC Comics) in 1938.[5][6] Superman first appeared in Action Comics #1 (June 1938) and subsequently appeared in various radio serials, television programs, films, newspaper strips, and video games. With the success of his adventures, Superman helped to create the superhero genre and establish its primacy within the American comic book.[1] 96 |

97 |

98 | Superman's appearance is distinctive and iconic. He usually wears a blue costume, red cape, and stylized red-and-yellow "S" shield on his chest.[7][8][9] This shield is used in a myriad of media to symbolize the character.[10] 99 |

100 |

101 | The origin story of Superman relates that he was born Kal-El on the planet Krypton, before being rocketed to Earth as an infant by his scientist father Jor-El, moments before Krypton's destruction. Discovered and adopted by a Kansas farmer and his wife, the child is raised as Clark Kent and imbued with a strong moral compass. Very early on he started to display superhuman abilities, which upon reaching maturity, he resolved to use for the benefit of humanity. Superman resides and operates in the fictional American city of Metropolis. As Clark Kent, he is a journalist for the Daily Planet, a Metropolis newspaper. Superman's primary love interest is Lois Lane and his archenemy is supervillain Lex Luthor.[11] Superman has fascinated scholars, with cultural theorists, commentators, and critics alike exploring the character's impact and role in the United States and worldwide. The character's ownership has often been the subject of dispute, with Siegel and Shuster twice suing for the return of legal ownership. Superman has been labeled as one of the greatest comic book heroes of all time.[12] 102 |

103 |
104 |
105 |

Wonder Woman

106 |
107 | 110 |
111 |

112 | Wonder Woman is a superheroine created by American psychologist and writer William Moulton Marston and published by DC Comics. The character first appeared in All Star Comics #8 in December 1941 and first cover-dated on Sensation Comics #1, January 1942. The Wonder Woman title has been published by DC Comics almost continuously except for a brief hiatus in 1986.[1] Her depiction as a heroine fighting for justice, love, peace, and sexual equality has led to Wonder Woman being widely considered a feminist icon.[2][3][4] Wonder Woman is a warrior princess of the Amazons (based on the Amazons of Greek mythology) and is known in her homeland as Princess Diana of Themyscira. When outside her homeland incognito, she is sometimes known by the secret identity Diana Prince. She is gifted with a wide range of superhuman powers and superior combat and battle skills. She possesses an arsenal of weapons, including the Lasso of Truth, a pair of indestructible bracelets, a tiara which serves as a projectile, and, in some stories, an invisible airplane. 113 |

114 |

115 | Created during World War II, the character was initially depicted fighting the Axis military forces, as well as an assortment of supervillains. Since then, Wonder Woman has gained a formidable cast of enemies bent on eliminating the Amazon, including classic villains such as Cheetah, Ares and Circe and newer ones like Genocide and The Circle, as well as many gods and monsters from Greek mythology. Wonder Woman has also regularly appeared in comic books featuring the superhero teams Justice Society (from 1941) and Justice League (from 1960).[5] 116 |

117 |

118 | In addition to the comics, the character has appeared in other media; most notably, the 1975–1979 Wonder Woman TV series starring Lynda Carter, as well as animated series such as the Super Friends and Justice League. Since Carter's Wonder Woman however, studios struggled to introduce a new live-action Wonder Woman to audiences, although the character continued to feature in a variety of toys and merchandise, as well as animated adaptations of DC properties, including a animated featuree. Attempts to return Wonder Woman to television have included a pilot for NBC in 2011, closely followed by another stalled production for The CW.[6][7] In 2013 however, it was announced that actress Gal Gadot would portray Wonder Woman in the upcoming untitled Man of Steel sequel.[8] 119 |

120 |
121 |
122 |

Flash

123 |
124 | 127 |
128 |

129 | The Flash (Bartholomew Henry "Barry" Allen) is a fictional character, a superhero in the DC Comics universe. He is the second character known as the Flash. The character first appeared in Showcase #4 (Oct. 1956), created by writers Robert Kanigher and John Broome and penciler Carmine Infantino.[1] His name combines talk show hosts Barry Gray and Steve Allen.[2] His death in 1985 removed the character from the regular DC lineup for 23 years. His return to regular comics occurred in 2008 within the pages of Grant Morrison's Final Crisis limited series. 130 |

131 |
132 |
133 |
134 |
135 |

Green Lantern

136 |
137 | 140 |
141 |

142 | Harold "Hal" Jordan is a DC Comics superhero known as Green Lantern, the first human shown to join the Green Lantern Corps and a founding member of the Justice League of America. Jordan is the second DC Comics character to adopt the Green Lantern moniker. Jordan was created in the Silver Age of Comic Books by John Broome and Gil Kane, and made his first appearance in Showcase #22 (October 1959) to replace the original Green Lantern Alan Scott from the Golden Age of Comic Books.[1] 143 |

144 |

145 | In 1994, the story Emerald Twilight saw Hal Jordan turn into the supervillain Parallax. Later, in the Zero Hour miniseries, he attempts cosmic genocide. He was replaced by Kyle Rayner as the new Green Lantern for the Modern Age of Comic Books. In the 1996 crossover story "The Final Night", he attempted to return to his heroic roots by dying to save the Earth, and later returned as a spirit of redemption in the persona of the Spectre. Hal Jordan was resurrected in the 2004 miniseries Green Lantern: Rebirth, which revealed that Parallax was actually an alien parasitic entity that influenced his prior villainy. He subsequently returned to the Green Lantern Corps and became the protagonist of the subsequent volumes of Green Lantern. 146 |

147 |

148 | Hal Jordan was ranked 7th on IGN's Top 100 Comic Book Heroes in 2011.[2] 149 |

150 |
151 |
152 |

Martian Manhunter

153 |
154 | 157 |
158 |

159 | The Martian Manhunter (J'onn J'onzz) is a fictional character, a superhero that appears in comic books published by DC Comics. Created by writer Joseph Samachson and artist Joe Certa, the character first appeared in Detective Comics #225 "The Manhunter From Mars" in August–September 1953.[1] The character is known for being one of the core members of the Justice League of America (JLA). 160 |

161 |

162 | J'onn J'onzz has featured in other DC Comics-endorsed products, such as video games, television series, animated films, or merchandise like action figures and trading cards. 163 |

164 |
165 |
166 |

Aquaman

167 |
168 | 171 |
172 |

173 | Aquaman is a superhero who stars in comic book titles by DC Comics. Created by Paul Norris and Mort Weisinger, the character debuted in More Fun Comics #73 (November 1941).[1] Initially a backup feature in DC's anthology titles, Aquaman later starred in several volumes of a solo title. During the late 1950s and 1960s superhero-revival period known as the Silver Age, he was a founding member of the Justice League of America. In the 1990s Modern Age, Aquaman's character became more serious than in most previous interpretations, with storylines depicting the weight of his role as king of Atlantis.[2] Later accounts reconciled both facets of the character, casting Aquaman as serious and broody, saddled with an ill reputation and struggling to find a true role and purpose beyond his public side as a deposed king and a fallen hero.[3] 174 |

175 |
176 |
177 |
178 |
179 | 182 | 192 | 193 | 194 | 195 | 196 | 197 | 200 | 201 | 202 | -------------------------------------------------------------------------------- /samples/overflow/style.css: -------------------------------------------------------------------------------- 1 | body, html, h1, h2 { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Roboto Slab', serif; 5 | } 6 | 7 | #header { 8 | background-color: #2d2d2d; 9 | color: white; 10 | text-align: center; 11 | } 12 | 13 | #description { 14 | margin: 20px; 15 | text-align: center; 16 | font-size: 20px; 17 | } 18 | 19 | .section-title { 20 | background-color: #2d2d2d; 21 | color: white; 22 | text-align: center; 23 | } 24 | 25 | .section { 26 | overflow: auto; 27 | } 28 | 29 | #footer { 30 | margin-top: 40px; 31 | padding-top: 40px; 32 | padding-bottom: 40px; 33 | font-size: 12px; 34 | line-height: 1.5; 35 | color: #777; 36 | border-top: 1px solid #eee; 37 | text-align: center; 38 | } 39 | 40 | .lazyload { 41 | background-color: black; 42 | display: inline-block; 43 | } 44 | 45 | .batman { 46 | float: left; 47 | width: 250px; 48 | height: 401px; 49 | margin: 10px; 50 | } 51 | 52 | .superman { 53 | float: right; 54 | width: 250px; 55 | height: 384px; 56 | margin: 10px; 57 | } 58 | 59 | .wonder-woman { 60 | float: left; 61 | width: 250px; 62 | height: 375px; 63 | margin: 10px; 64 | } 65 | 66 | .flash { 67 | float: right; 68 | width: 236px; 69 | height: 450px; 70 | margin: 10px; 71 | } 72 | 73 | .green-lantern { 74 | float: left; 75 | width: 250px; 76 | height: 336px; 77 | margin: 10px; 78 | } 79 | 80 | .martian-manhunter { 81 | float: right; 82 | width: 162px; 83 | height: 448px; 84 | margin: 10px; 85 | } 86 | 87 | .aquaman { 88 | float: left; 89 | width: 250px; 90 | height: 381px; 91 | margin: 10px; 92 | } 93 | 94 | #code-block { 95 | margin: 10px auto; 96 | width: 80%; 97 | } 98 | 99 | #code-block h3 { 100 | text-align: center; 101 | } 102 | 103 | .sections { 104 | height: 450px; 105 | overflow: auto; 106 | } 107 | -------------------------------------------------------------------------------- /samples/youtube/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lazyload Youtube 6 | 7 | 8 | 9 | 10 | 21 | 22 | 23 | 27 |
28 |
29 |

30 | Images preview will be loaded when they show in the screen. Youtube will be loaded when click. 31 |

32 |

33 | Scroll down and click to see the effect. 34 |

35 |
36 |
37 |

HTML

38 |
 39 |         <div class="lazyload-youtube" >
 40 |           <div class="lazyload-thumbnail" >
 41 |           <!--
 42 |           <img src="http://img.youtube.com/vi/XRr-KUV8-eE/0.jpg" width="560" height="315" />
 43 |           <span class="play"></span>
 44 |           -->
 45 |           </div>
 46 |           <!--
 47 |           <div class="lazyload-youtube" >
 48 |             <iframe width="560" height="315" src="//www.youtube.com/embed/XRr-KUV8-eE?autoplay=1" frameborder="0" allowfullscreen></iframe>
 49 |           </div>
 50 |           -->
 51 |         </div>
 52 |       
53 |

JavaScript

54 |
 55 |         function load(img)
 56 |         {
 57 |           img.fadeOut(0, function() {
 58 |             img.fadeIn(1000);
 59 |           });
 60 |         }
 61 |         $('.lazyload-thumbnail').lazyload({load: load});
 62 |         $('.lazyload-youtube').lazyload({trigger: 'click'});
 63 |       
64 |
65 |
66 |
67 |

Batman

68 |

69 | Batman is a fictional character, a comic book superhero appearing in comic books published by DC Comics. Batman was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 (May 1939). Originally referred to as "the Bat-Man" and still referred to at times as "the Batman," the character is additionally known as "the Caped Crusader,"[5] "the Dark Knight,"[5] and "the World's Greatest Detective,"[5] among other titles. 70 |

71 |

72 | Batman is the secret identity of Bruce Wayne, an American billionaire womanizer, industrialist, and philanthropist. Having witnessed the murder of his parents as a child, he swore revenge on criminals, an oath tempered with the greater ideal of justice. Wayne trains himself both physically and intellectually and dons a bat-themed costume in order to fight crime.[6] Batman operates in the fictional Gotham City, assisted by various supporting characters including his crime-fighting partner, Robin, his butler Alfred Pennyworth, the police commissioner Jim Gordon, and occasionally the heroine Batgirl. He fights an assortment of villains, often referred to as the "rogues gallery," which includes the Joker, the Penguin, the Riddler, Two-Face, Ra's al Ghul, Scarecrow, Poison Ivy, and Catwoman, among many others. Unlike most superheroes, he does not possess any superpowers; he makes use of intellect, detective skills, science and technology, wealth, physical prowess, martial arts skills, an indomitable will, fear, and intimidation in his continuous war on crime. 73 |

74 |

75 | Batman became a very popular character soon after his introduction and gained his own comic book title, Batman, in 1940. As the decades wore on, differing interpretations of the character emerged. The late 1960s Batman television series used a camp aesthetic which continued to be associated with the character for years after the show ended. Various creators worked to return the character to his dark roots, with varying results. The comic books of this dark stage culminated in the acclaimed 1986 miniseries The Dark Knight Returns, by Frank Miller, as well as Batman: The Killing Joke by Alan Moore and Arkham Asylum: A Serious House on Serious Earth by Grant Morrison, among others. The overall success of Warner Bros.' live-action Batman feature films have also helped maintain public interest in the character.[7] 76 |

77 |

78 | An American cultural icon, Batman has been licensed and adapted into a variety of media, from radio to television and film, and appears on a variety of merchandise sold all over the world such as toys and video games. The character has also intrigued psychiatrists with many trying to understand the character's psyche and his true ego in society. In May 2011, Batman placed second on IGN's Top 100 Comic Book Heroes of All Time,[8] after Superman. Empire magazine also listed him second in their 50 Greatest Comic Book Characters of All Time. 79 |

80 |

81 | The character has been portrayed in films by Lewis Wilson, Robert Lowery, Adam West, Michael Keaton, Val Kilmer, George Clooney, Christian Bale, and soon by Ben Affleck. 82 |

83 |
84 |
85 | 89 |
90 | 95 |
96 |
97 |
98 |

Superman

99 |

100 | Superman is a fictional character, a superhero that appears in comic books published by DC Comics, and is considered an American cultural icon.[1][2][3][4] Superman was created by writer Jerry Siegel and artist Joe Shuster, high school students living in Cleveland, Ohio, in 1933; the character was sold to Detective Comics, Inc. (later DC Comics) in 1938.[5][6] Superman first appeared in Action Comics #1 (June 1938) and subsequently appeared in various radio serials, television programs, films, newspaper strips, and video games. With the success of his adventures, Superman helped to create the superhero genre and establish its primacy within the American comic book.[1] 101 |

102 |

103 | Superman's appearance is distinctive and iconic. He usually wears a blue costume, red cape, and stylized red-and-yellow "S" shield on his chest.[7][8][9] This shield is used in a myriad of media to symbolize the character.[10] 104 |

105 |

106 | The origin story of Superman relates that he was born Kal-El on the planet Krypton, before being rocketed to Earth as an infant by his scientist father Jor-El, moments before Krypton's destruction. Discovered and adopted by a Kansas farmer and his wife, the child is raised as Clark Kent and imbued with a strong moral compass. Very early on he started to display superhuman abilities, which upon reaching maturity, he resolved to use for the benefit of humanity. Superman resides and operates in the fictional American city of Metropolis. As Clark Kent, he is a journalist for the Daily Planet, a Metropolis newspaper. Superman's primary love interest is Lois Lane and his archenemy is supervillain Lex Luthor.[11] Superman has fascinated scholars, with cultural theorists, commentators, and critics alike exploring the character's impact and role in the United States and worldwide. The character's ownership has often been the subject of dispute, with Siegel and Shuster twice suing for the return of legal ownership. Superman has been labeled as one of the greatest comic book heroes of all time.[12] 107 |

108 |
109 |
110 | 114 |
115 | 120 |
121 |
122 |
123 |

Wonder Woman

124 |

125 | Wonder Woman is a superheroine created by American psychologist and writer William Moulton Marston and published by DC Comics. The character first appeared in All Star Comics #8 in December 1941 and first cover-dated on Sensation Comics #1, January 1942. The Wonder Woman title has been published by DC Comics almost continuously except for a brief hiatus in 1986.[1] Her depiction as a heroine fighting for justice, love, peace, and sexual equality has led to Wonder Woman being widely considered a feminist icon.[2][3][4] Wonder Woman is a warrior princess of the Amazons (based on the Amazons of Greek mythology) and is known in her homeland as Princess Diana of Themyscira. When outside her homeland incognito, she is sometimes known by the secret identity Diana Prince. She is gifted with a wide range of superhuman powers and superior combat and battle skills. She possesses an arsenal of weapons, including the Lasso of Truth, a pair of indestructible bracelets, a tiara which serves as a projectile, and, in some stories, an invisible airplane. 126 |

127 |

128 | Created during World War II, the character was initially depicted fighting the Axis military forces, as well as an assortment of supervillains. Since then, Wonder Woman has gained a formidable cast of enemies bent on eliminating the Amazon, including classic villains such as Cheetah, Ares and Circe and newer ones like Genocide and The Circle, as well as many gods and monsters from Greek mythology. Wonder Woman has also regularly appeared in comic books featuring the superhero teams Justice Society (from 1941) and Justice League (from 1960).[5] 129 |

130 |

131 | In addition to the comics, the character has appeared in other media; most notably, the 1975–1979 Wonder Woman TV series starring Lynda Carter, as well as animated series such as the Super Friends and Justice League. Since Carter's Wonder Woman however, studios struggled to introduce a new live-action Wonder Woman to audiences, although the character continued to feature in a variety of toys and merchandise, as well as animated adaptations of DC properties, including a animated featuree. Attempts to return Wonder Woman to television have included a pilot for NBC in 2011, closely followed by another stalled production for The CW.[6][7] In 2013 however, it was announced that actress Gal Gadot would portray Wonder Woman in the upcoming untitled Man of Steel sequel.[8] 132 |

133 |
134 |
135 | 139 |
140 | 145 |
146 |
147 |
148 |

Flash

149 |

150 | The Flash (Bartholomew Henry "Barry" Allen) is a fictional character, a superhero in the DC Comics universe. He is the second character known as the Flash. The character first appeared in Showcase #4 (Oct. 1956), created by writers Robert Kanigher and John Broome and penciler Carmine Infantino.[1] His name combines talk show hosts Barry Gray and Steve Allen.[2] His death in 1985 removed the character from the regular DC lineup for 23 years. His return to regular comics occurred in 2008 within the pages of Grant Morrison's Final Crisis limited series. 151 |

152 |
153 |
154 | 158 |
159 | 164 |
165 |
166 |
167 |

Green Lantern

168 |

169 | Harold "Hal" Jordan is a DC Comics superhero known as Green Lantern, the first human shown to join the Green Lantern Corps and a founding member of the Justice League of America. Jordan is the second DC Comics character to adopt the Green Lantern moniker. Jordan was created in the Silver Age of Comic Books by John Broome and Gil Kane, and made his first appearance in Showcase #22 (October 1959) to replace the original Green Lantern Alan Scott from the Golden Age of Comic Books.[1] 170 |

171 |

172 | In 1994, the story Emerald Twilight saw Hal Jordan turn into the supervillain Parallax. Later, in the Zero Hour miniseries, he attempts cosmic genocide. He was replaced by Kyle Rayner as the new Green Lantern for the Modern Age of Comic Books. In the 1996 crossover story "The Final Night", he attempted to return to his heroic roots by dying to save the Earth, and later returned as a spirit of redemption in the persona of the Spectre. Hal Jordan was resurrected in the 2004 miniseries Green Lantern: Rebirth, which revealed that Parallax was actually an alien parasitic entity that influenced his prior villainy. He subsequently returned to the Green Lantern Corps and became the protagonist of the subsequent volumes of Green Lantern. 173 |

174 |

175 | Hal Jordan was ranked 7th on IGN's Top 100 Comic Book Heroes in 2011.[2] 176 |

177 |
178 |
179 | 183 |
184 | 189 |
190 |
191 |
192 |

Martian Manhunter

193 |

194 | The Martian Manhunter (J'onn J'onzz) is a fictional character, a superhero that appears in comic books published by DC Comics. Created by writer Joseph Samachson and artist Joe Certa, the character first appeared in Detective Comics #225 "The Manhunter From Mars" in August–September 1953.[1] The character is known for being one of the core members of the Justice League of America (JLA). 195 |

196 |

197 | J'onn J'onzz has featured in other DC Comics-endorsed products, such as video games, television series, animated films, or merchandise like action figures and trading cards. 198 |

199 |
200 |
201 | 205 |
206 | 211 |
212 |
213 |
214 |

Aquaman

215 |

216 | Aquaman is a superhero who stars in comic book titles by DC Comics. Created by Paul Norris and Mort Weisinger, the character debuted in More Fun Comics #73 (November 1941).[1] Initially a backup feature in DC's anthology titles, Aquaman later starred in several volumes of a solo title. During the late 1950s and 1960s superhero-revival period known as the Silver Age, he was a founding member of the Justice League of America. In the 1990s Modern Age, Aquaman's character became more serious than in most previous interpretations, with storylines depicting the weight of his role as king of Atlantis.[2] Later accounts reconciled both facets of the character, casting Aquaman as serious and broody, saddled with an ill reputation and struggling to find a true role and purpose beyond his public side as a deposed king and a fallen hero.[3] 217 |

218 |
219 |
220 | 224 |
225 | 230 |
231 |
232 |
233 |
234 | 237 | 247 | 248 | 249 | 250 | 251 | 252 | 255 | 256 | 257 | -------------------------------------------------------------------------------- /samples/youtube/play-hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/youtube/play-hover.png -------------------------------------------------------------------------------- /samples/youtube/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emn178/jquery-lazyload-any/ac11b1bfcfe51b66f7270600ee69214dd1aa05f6/samples/youtube/play.png -------------------------------------------------------------------------------- /samples/youtube/style.css: -------------------------------------------------------------------------------- 1 | body, html, h1, h2 { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Roboto Slab', serif; 5 | } 6 | 7 | #header { 8 | background-color: #2d2d2d; 9 | color: white; 10 | text-align: center; 11 | } 12 | 13 | #description { 14 | margin: 20px; 15 | text-align: center; 16 | font-size: 20px; 17 | } 18 | 19 | .section-title { 20 | background-color: #2d2d2d; 21 | color: white; 22 | text-align: center; 23 | } 24 | 25 | .section { 26 | margin-bottom: 20px; 27 | } 28 | 29 | #footer { 30 | margin-top: 40px; 31 | padding-top: 40px; 32 | padding-bottom: 40px; 33 | font-size: 12px; 34 | line-height: 1.5; 35 | color: #777; 36 | border-top: 1px solid #eee; 37 | text-align: center; 38 | } 39 | 40 | .lazyload-youtube { 41 | position: relative; 42 | background-color: black; 43 | width: 560px; 44 | height: 315px; 45 | margin: 0 auto; 46 | cursor: pointer; 47 | } 48 | 49 | .play { 50 | position: absolute; 51 | width: 64px; 52 | height: 64px; 53 | top: 125.5px; 54 | left: 248px; 55 | background-image: url(play.png); 56 | -moz-opacity: 0.70; 57 | opacity: 0.70; 58 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); 59 | } 60 | 61 | .lazyload-youtube:hover .play { 62 | background-image: url(play-hover.png); 63 | -moz-opacity: 1; 64 | opacity: 1; 65 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); 66 | } 67 | 68 | #code-block { 69 | margin: 10px auto; 70 | width: 80%; 71 | } 72 | 73 | #code-block h3 { 74 | text-align: center; 75 | } -------------------------------------------------------------------------------- /src/jquery.lazyload-any.js: -------------------------------------------------------------------------------- 1 | /** 2 | * [jQuery-lazyload-any]{@link https://github.com/emn178/jquery-lazyload-any} 3 | * 4 | * @version 0.3.1 5 | * @author Yi-Cyuan Chen [emn178@gmail.com] 6 | * @copyright Yi-Cyuan Chen 2014-2016 7 | * @license MIT 8 | */ 9 | (function ($, window, document) { 10 | var KEY = 'jquery-lazyload-any'; 11 | var EVENT = 'appear'; 12 | var SELECTOR_KEY = KEY + '-' + EVENT; 13 | var SELECTOR = ':' + SELECTOR_KEY; 14 | var SCROLLER_KEY = KEY + '-scroller'; 15 | var DISPLAY_KEY = KEY + '-display'; 16 | var WATCH_KEY = KEY + '-watch'; 17 | var DIV = $('
'); 18 | var screenHeight, screenWidth, init = false, observations = $(); 19 | 20 | $.expr[':'][SELECTOR_KEY] = function (element) { 21 | return $(element).data(SELECTOR_KEY) !== undefined; 22 | }; 23 | 24 | function test() { 25 | var element = $(this); 26 | if (element.is(':visible') && visible(element)) { 27 | element.trigger(EVENT); 28 | } 29 | } 30 | 31 | function visible(element) { 32 | var rect = element[0].getBoundingClientRect(); 33 | var x1 = -element.data(KEY).threshold; 34 | var y1 = x1; 35 | var y2 = screenHeight - y1; 36 | var x2 = screenWidth - x1; 37 | return (rect.top >= y1 && rect.top <= y2 || rect.bottom >= y1 && rect.bottom <= y2) && 38 | (rect.left >= x1 && rect.left <= x2 || rect.right >= x1 && rect.right <= x2); 39 | } 40 | 41 | function resize() { 42 | screenHeight = window.innerHeight || document.documentElement.clientHeight; 43 | screenWidth = window.innerWidth || document.documentElement.clientWidth; 44 | detect(); 45 | } 46 | 47 | function detect() { 48 | observations = observations.filter(SELECTOR); 49 | if (this.nodeType == 1) { 50 | $(this).find(SELECTOR).each(test); 51 | } else { 52 | observations.each(test); 53 | } 54 | } 55 | 56 | function show() { 57 | var element = $(this); 58 | var options = element.data(KEY); 59 | var content = element.data('lazyload'); 60 | if (!content) { 61 | var script = element.children().filter('script[type="text/lazyload"]').get(0); 62 | content = $(script).html(); 63 | } 64 | if (!content) { 65 | var comment = element.contents().filter(function () { 66 | return this.nodeType === 8; 67 | }).get(0); 68 | content = comment && $.trim(comment.data); 69 | } 70 | var newElement = DIV.html(content).contents(); 71 | element.replaceWith(newElement); 72 | if ($.isFunction(options.load)) { 73 | options.load.call(newElement, newElement); 74 | } 75 | } 76 | 77 | function watch() { 78 | var element = $(this); 79 | if (!(watchScroller(element) | watchDisplay(element))) { 80 | return; 81 | } 82 | if (element.data(WATCH_KEY)) { 83 | return; 84 | } 85 | element.data(WATCH_KEY, 1); 86 | element.bind(EVENT, clearWatch); 87 | } 88 | 89 | function watchScroller(element) { 90 | if (element.data(SCROLLER_KEY)) { 91 | return false; 92 | } 93 | var overflow = element.css('overflow'); 94 | if (overflow != 'scroll' && overflow != 'auto') { 95 | return false; 96 | } 97 | element.data(SCROLLER_KEY, 1); 98 | element.bind('scroll', detect); 99 | return true; 100 | } 101 | 102 | function watchDisplay(element) { 103 | if (element.data(DISPLAY_KEY)) { 104 | return; 105 | } 106 | var display = element.css('display'); 107 | if (display != 'none') { 108 | return; 109 | } 110 | element.data(DISPLAY_KEY, 1); 111 | element._bindShow(detect); 112 | return true; 113 | } 114 | 115 | function clearWatch() { 116 | var element = $(this); 117 | if (element.find(SELECTOR).length === 0) { 118 | element.removeData(SCROLLER_KEY).removeData(DISPLAY_KEY).removeData(WATCH_KEY); 119 | element.unbind('scroll', detect).unbind(EVENT, clearWatch)._unbindShow(detect); 120 | } 121 | } 122 | 123 | function refresh(selector) { 124 | var elements = selector === undefined ? observations : $(selector); 125 | elements.each(function () { 126 | var element = $(this); 127 | if (!element.is(SELECTOR)) { 128 | return; 129 | } 130 | element.parents().each(watch); 131 | }); 132 | } 133 | 134 | $.fn.lazyload = function (options) { 135 | var opts = { 136 | threshold: 0, 137 | trigger: EVENT 138 | }; 139 | $.extend(opts, options); 140 | var trigger = opts.trigger.split(' '); 141 | this.data(SELECTOR_KEY, $.inArray(EVENT, trigger) != -1).data(KEY, opts); 142 | this.bind(opts.trigger, show); 143 | this.each(test); 144 | this.parents().each(watch); 145 | this.each(function () { 146 | observations = observations.add(this); 147 | }); 148 | 149 | if (!init) { 150 | init = true; 151 | resize(); 152 | $(document).ready(function () { 153 | $(window).bind('resize', resize).bind('scroll', detect); 154 | }); 155 | } 156 | return this; 157 | }; 158 | 159 | $.lazyload = { 160 | check: detect, 161 | refresh: refresh 162 | }; 163 | 164 | // SHOW EVENT 165 | (function () { 166 | var EVENT = 'show'; 167 | var SELECTOR_KEY = KEY + '-' + EVENT; 168 | var SELECTOR = ':' + SELECTOR_KEY; 169 | var interval = 50, timer, observations = $(); 170 | 171 | $.expr[':'][SELECTOR_KEY] = function (element) { 172 | return $(element).data(SELECTOR_KEY) !== undefined; 173 | }; 174 | 175 | function test() { 176 | var element = $(this); 177 | var status = element.css('display') != 'none'; 178 | if (element.data(SELECTOR_KEY) != status) { 179 | element.data(SELECTOR_KEY, status); 180 | if (status) { 181 | element.trigger(EVENT); 182 | } 183 | } 184 | } 185 | 186 | function detect() { 187 | observations = observations.filter(SELECTOR); 188 | observations.each(test); 189 | if (observations.length === 0) { 190 | timer = clearInterval(timer); 191 | } 192 | } 193 | 194 | $.fn._bindShow = function (handler) { 195 | this.bind(EVENT, handler); 196 | this.data(SELECTOR_KEY, this.css('display') != 'none'); 197 | observations = observations.add(this); 198 | if (interval && !timer) { 199 | timer = setInterval(detect, interval); 200 | } 201 | }; 202 | 203 | $.fn._unbindShow = function (handler) { 204 | this.unbind(EVENT, handler); 205 | this.removeData(SELECTOR_KEY); 206 | }; 207 | 208 | $.lazyload.setInterval = function (value) { 209 | if (value == interval || !$.isNumeric(value) || value < 0) { 210 | return; 211 | } 212 | interval = value; 213 | timer = clearInterval(timer); 214 | if (interval > 0) { 215 | timer = setInterval(detect, interval); 216 | } 217 | }; 218 | })(); 219 | })(jQuery, window, document); 220 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 |

Script

12 |
13 | 14 | 17 | 18 |

Attribute

19 |
20 | 21 | 22 |

Text

23 |
24 | 25 | 28 | 29 |

Tab

30 |
31 |
32 | 33 |
34 | 41 |
42 |

Overflow

43 |
44 |
45 | 46 | 49 | 50 |
51 | 52 | 55 | 56 |
57 |

Horizontal

58 |
59 |
60 | 61 | 64 | 65 |
66 |

Vertical

67 |
68 | 69 | 72 | 73 |
74 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /tests/style.css: -------------------------------------------------------------------------------- 1 | .lazyload { 2 | width: 100px; 3 | height: 100px; 4 | background-color: black; 5 | display: inline-block; 6 | } 7 | 8 | .wide { 9 | width: 200%; 10 | } 11 | 12 | .padding { 13 | width: 80%; 14 | display: inline-block; 15 | } 16 | 17 | .overflow { 18 | height: 300px; 19 | overflow: auto; 20 | } 21 | 22 | .content { 23 | height: 1000px; 24 | background-color: gray; 25 | } 26 | --------------------------------------------------------------------------------