Skip to content

Commit 4bef0c8

Browse files
sjwilliamssjwilliams
committed
Merge pull request #16 from sjwilliams/alternate-events
Bind to event other than native scroll
2 parents 7b578c9 + 0ca61ca commit 4bef0c8

5 files changed

+201
-13
lines changed

‎examples/vertical.html

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<meta name="viewport" content="width=device-width">
8+
<title>Horizontal LaziestLoader example</title>
9+
<style>
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
background-color: #000;
14+
}
15+
16+
ul {
17+
display: block;
18+
margin: 0 auto;
19+
padding: 0;
20+
}
21+
22+
li {
23+
list-style-type: none;
24+
padding: 0;
25+
margin: 30px auto;
26+
max-width: 1300px;
27+
}
28+
29+
.ll-init {
30+
width: 100%;
31+
transition: opacity 0.3s ease-out;
32+
opacity: 0;
33+
}
34+
35+
.ll-loaded {
36+
opacity: 1;
37+
}
38+
39+
h2 {
40+
position: absolute;
41+
-webkit-transform: translateZ(0px);
42+
-webkit-backface-visibility: hidden;
43+
margin: 0;
44+
z-index: 1;
45+
bottom: 40px;
46+
47+
font-family: Helvetica;
48+
text-align: center;
49+
width: 100%;
50+
color: #fff;
51+
text-shadow: #333 0px 0px 2px, #000 0px 0px 6px;
52+
}
53+
</style>
54+
</head>
55+
56+
<body>
57+
<h2>Scroll ↓</h2>
58+
<ul class="images">
59+
<li>
60+
<img id="one" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0001-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
61+
</li>
62+
<li>
63+
<img id="two" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0002-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
64+
</li>
65+
<li>
66+
<img id="three" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0003-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
67+
</li>
68+
<li>
69+
<img id="four" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0004-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
70+
</li>
71+
<li>
72+
<img id="five" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0005-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
73+
</li>
74+
75+
<li>
76+
<img id="six" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0006-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
77+
</li>
78+
79+
<li>
80+
<img id="seven" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0007-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
81+
</li>
82+
<li>
83+
<img id="eight" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0008-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
84+
</li>
85+
<li>
86+
<img id="nine" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0009-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
87+
</li>
88+
<li>
89+
<img id="ten" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6674-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
90+
</li>
91+
92+
<li>
93+
<img id="eleven" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6674-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
94+
</li>
95+
<li>
96+
<img id="twelve" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6675-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
97+
</li>
98+
<li>
99+
<img id="thirteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6676-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
100+
</li>
101+
<li>
102+
<img id="fourteen " class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6677-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
103+
</li>
104+
<li>
105+
<img id="fifteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6678-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
106+
</li>
107+
108+
109+
<li>
110+
<img id="sixteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6679-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
111+
</li>
112+
<li>
113+
<img id="seventeen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6680-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
114+
</li>
115+
<li>
116+
<img id="eighteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6681-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
117+
</li>
118+
<li>
119+
<img id="nineteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6684-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
120+
</li>
121+
<li>
122+
<img id="twenty" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6685-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
123+
</li>
124+
</ul>
125+
<script src="../jquery-1.9.1.min.js"></script>
126+
<script src="../jquery.laziestloader.js"></script>
127+
<script>
128+
$('.lazy').laziestloader({
129+
threshold: 150
130+
});
131+
132+
</script>
133+
</body>
134+
135+
</html>

‎index.html

+5
Original file line numberDiff line numberDiff line change
@@ -622,6 +622,11 @@ <h2>Trigger</h2>
622622

623623
<section id="releasehistory">
624624
<h2>Release History</h2>
625+
<h4>0.7.0</h4>
626+
<ul>
627+
<li>Allow custom events, beyond the native scroll event, to trigger LaziestLoader. See <a href="https://github.com/sjwilliams/laziestloader/pull/16">Issue 16</a>.</li>
628+
</ul>
629+
625630
<h4>0.6.3</h4>
626631
<ul>
627632
<li>Wait until $(document).ready() to perform initial check of lazy images.</li>

‎jquery.laziestloader.js

+58-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* @preserve LaziestLoader - v0.6.3 - 2015-11-16
2+
* @preserve LaziestLoader - v0.7.0 - 2015-11-17
33
* A responsive lazy loader for jQuery.
44
* http://sjwilliams.github.io/laziestloader/
55
* Copyright (c) 2015 Josh Williams; Licensed MIT
@@ -25,11 +25,15 @@
2525
threshold: 0,
2626
sizePattern: /{{SIZE}}/ig,
2727
getSource: getSource,
28+
event: 'scroll',
2829
scrollThrottle: 250, // time in ms to throttle scroll. Increase for better performance.
2930
sizeOffsetPercent: 0, // prefer smaller images
3031
setSourceMode: true // plugin sets source attribute of the element. Set to false if you would like to, instead, use the callback to completely manage the element on trigger.
3132
}, options);
3233

34+
35+
var useNativeScroll = options.event === 'string' && options.event.indexOf('scroll') === 0;
36+
3337
/**
3438
* Generate source path of image to load. Take into account
3539
* type of data supplied and whether or not a retina
@@ -243,20 +247,64 @@
243247
// element dimensions need to be set.
244248
$elements.addClass('ll-init ll-notloaded').each(setHeight);
245249

250+
// initial binding
246251
bindLoader();
247252

248253

249-
// throttled scroll events
250-
$w.scroll(function() {
251-
didScroll = true;
252-
});
254+
// Watch either native scroll events, throttled by
255+
// options.scrollThrottle, or a custom event that
256+
// implements its own throttling.
253257

254-
setInterval(function() {
255-
if (didScroll) {
256-
didScroll = false;
257-
laziestloader();
258+
if (useNativeScroll) {
259+
$w.scroll(function(){
260+
didScroll = true;
261+
});
262+
263+
setInterval(function() {
264+
if (didScroll) {
265+
didScroll = false;
266+
laziestloader();
267+
}
268+
}, options.scrollThrottle);
269+
270+
} else {
271+
272+
// if custom event is a function, it'll need
273+
// to call laziestloader() manually, like so:
274+
//
275+
// $('.g-lazy').laziestloader({
276+
// event: function(cb){
277+
// // custom scroll event on nytimes.com
278+
// PageManager.on('nyt:page-scroll', function(){
279+
// // do something interesting if you like
280+
// // and then call the passed in laziestloader();
281+
// cb();
282+
// });
283+
// }
284+
// });
285+
//
286+
//
287+
// Otherwise, it's a string representing an event on the
288+
// window to subscribe to, like so:
289+
//
290+
// // some code dispatching throttled events
291+
// $window.trigger('nytg-scroll');
292+
//
293+
// $('.g-lazy').laziestloader({
294+
// event: 'nytg-scroll'
295+
// });
296+
//
297+
298+
if (typeof options.event === 'function') {
299+
options.event(laziestloader);
300+
} else {
301+
$w.on(options.event, function(){
302+
laziestloader();
303+
});
258304
}
259-
}, options.scrollThrottle);
305+
}
306+
307+
260308

261309
// reset state on resize
262310
$w.resize(function() {

‎jquery.laziestloader.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "laziestloader",
3-
"version": "0.6.3",
3+
"version": "0.7.0",
44
"author": "Josh Williams <contact@joshwilliams.com>",
55
"description": "A responsive-aware jQuery plugin to smartly lazy load images and trigger callbacks.",
66
"repository": {

0 commit comments

Comments
 (0)