Skip to content

Commit 19af7c8

Browse files
sjwilliamssjwilliams
committed
Merge pull request #14 from sjwilliams/issue-12
Horizontal Scroll
2 parents 8c0b6aa + 2ceb215 commit 19af7c8

6 files changed

+189
-27
lines changed

‎bower.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"name": "laziestloader",
3-
"version": "0.5.1",
3+
"version": "0.6.0",
44
"homepage": "https://github.com/sjwilliams/laziestloader",
55
"authors": [
66
"Josh Williams <contact@joshwilliams.com>"
77
],
8-
"description": "A responsive-aware jQuery plugin to smartly lazy load images and other elements.",
8+
"description": "A responsive-aware jQuery plugin to smartly lazy load images and trigger callbacks.",
99
"main": "jquery.laziestloader.js",
1010
"license": "MIT",
1111
"private": false,

‎examples/horizontal.html

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
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+
width: 500vw;
19+
margin: 0 0 5px 0;
20+
padding: 0;
21+
}
22+
23+
ul:after {
24+
visibility: hidden;
25+
display: block;
26+
font-size: 0;
27+
content: " ";
28+
clear: both;
29+
height: 0;
30+
}
31+
32+
li {
33+
float: left;
34+
width: 100vw;
35+
list-style-type: none;
36+
display: block;
37+
}
38+
39+
.ll-init {
40+
width: 100%;
41+
transition: opacity 0.3s ease-out;
42+
opacity: 0;
43+
}
44+
45+
.ll-loaded {
46+
opacity: 1;
47+
}
48+
49+
h2 {
50+
position: fixed;
51+
-webkit-transform: translateZ(0px);
52+
-webkit-backface-visibility: hidden;
53+
margin: 0;
54+
z-index: 1;
55+
top: 50vh;
56+
57+
font-family: Helvetica;
58+
text-align: center;
59+
width: 100%;
60+
color: #fff;
61+
text-shadow: #333 0px 0px 2px, #000 0px 0px 6px;
62+
}
63+
</style>
64+
</head>
65+
66+
<body>
67+
<h2>Scroll ↓ →</h2>
68+
<ul class="images">
69+
<li>
70+
<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]">
71+
</li>
72+
<li>
73+
<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]">
74+
</li>
75+
<li>
76+
<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]">
77+
</li>
78+
<li>
79+
<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]">
80+
</li>
81+
<li>
82+
<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]">
83+
</li>
84+
</ul>
85+
<ul class="images">
86+
<li>
87+
<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]">
88+
</li>
89+
<li>
90+
<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]">
91+
</li>
92+
<li>
93+
<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]">
94+
</li>
95+
<li>
96+
<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]">
97+
</li>
98+
<li>
99+
<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]">
100+
</li>
101+
</ul>
102+
103+
<ul class="images">
104+
<li>
105+
<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]">
106+
</li>
107+
<li>
108+
<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]">
109+
</li>
110+
<li>
111+
<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]">
112+
</li>
113+
<li>
114+
<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]">
115+
</li>
116+
<li>
117+
<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]">
118+
</li>
119+
</ul>
120+
121+
122+
<ul class="images">
123+
<li>
124+
<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]">
125+
</li>
126+
<li>
127+
<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]">
128+
</li>
129+
<li>
130+
<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]">
131+
</li>
132+
<li>
133+
<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]">
134+
</li>
135+
<li>
136+
<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]">
137+
</li>
138+
</ul>
139+
<script src="../jquery-1.9.1.min.js"></script>
140+
<script src="../jquery.laziestloader.js"></script>
141+
<script>
142+
$('.lazy').laziestloader({
143+
threshold: 50
144+
});
145+
146+
</script>
147+
</body>
148+
149+
</html>

‎index.html

+19-9
Original file line numberDiff line numberDiff line change
@@ -283,10 +283,10 @@ <h1>LaziestLoader</h1>
283283
</section>
284284

285285
<section class="installation">
286-
<h2>Download v0.5.1</h2>
286+
<h2>Download v0.6.0</h2>
287287
<ol>
288-
<li><a href="https://raw.githubusercontent.com/sjwilliams/laziestloader/v0.5.1/jquery.laziestloader.js">Development Version</a></li>
289-
<li><a href="https://raw.githubusercontent.com/sjwilliams/laziestloader/v0.5.1/jquery.laziestloader.min.js">Production Version</a></li>
288+
<li><a href="https://raw.githubusercontent.com/sjwilliams/laziestloader/v0.6.0/jquery.laziestloader.js">Development Version</a></li>
289+
<li><a href="https://raw.githubusercontent.com/sjwilliams/laziestloader/v0.6.0/jquery.laziestloader.min.js">Production Version</a></li>
290290
<li><span class="code">$ npm install laziestloader</span></li>
291291
<li><span class="code">$ bower install laziestloader</span></li>
292292
</ol>
@@ -410,17 +410,17 @@ <h3>Non-responsive w/ Retina, smaller element</h3>
410410
<pre class="code">
411411
// html
412412
&lt;img class=&quot;lazy&quot; src=&quot;img/transparent.gif&quot; data-src=&quot;http://dummyimage.com/1400x700/3a3a3a/fff.png&quot; data-src-retina=&quot;http://dummyimage.com/2800x1400/3a3a3a/fff.png&quot;&gt;
413-
413+
414414
// js
415-
$('.lazy').laziestloader();
415+
$('.lazy').laziestloader();
416416
</pre>
417417
</div>
418418

419419
<div class="example">
420420
<h3>Responsive</h3>
421421
<p>Go beyond a single source by providing a URL that has a width as part of the path or name.</p>
422422
<img class="lazy" src="img/transparent.gif" data-pattern="img/ar-{{size}}.jpg" data-widths="[320, 900, 1500]">
423-
423+
424424
<pre class="code">
425425
// html
426426
&lt;img class=&quot;lazy&quot; src=&quot;img/transparent.gif&quot; data-pattern=&quot;img/ar-{{size}}.jpg&quot; data-widths=&quot;[320, 900, 1500]&quot;&gt;
@@ -448,7 +448,7 @@ <h3>Responsive, smaller element</h3>
448448
<h3>Responsive w/ Slugs</h3>
449449
<p>You can select a sized image that doesn't use the width value in the file name or path.</p>
450450
<img class="lazy" src="img/transparent.gif" data-pattern="img/ar2-{{size}}.jpg" data-widths='[{"size":320,"slug":"small"}, {"size":900, "slug":"medium"}, {"size":1500, "slug":"large"}]'>
451-
451+
452452
<pre class="code">
453453

454454
// html
@@ -574,7 +574,7 @@ <h2>Options</h2>
574574
<h3>threshold</h3>
575575
<p>By default, images are only loaded when the user scrolls to them and they became visible on the screen.</p>
576576
<p>If you want your images to load earlier than that, lets say 200px before they appear on the screen, specify the threshold in the options object.</p>
577-
577+
578578
<code>
579579
$("img").laziestloader({threshold: 200});
580580
</code>
@@ -587,7 +587,7 @@ <h3>scrollThrottle</h3>
587587

588588
<h3>sizeOffsetPercent</h3>
589589
<p>The crop selection logic works by picking the image that is greater than or equal to the size of the current element. If you prefer to scale smaller images into larger elements, set this between 0 and 100, where the value is the percent width of the containing element you want to subtract from the math logic. The bigger the number, the smaller the image that'll be selected.
590-
</p>
590+
</p>
591591
<code>
592592
$("img").laziestloader({sizeOffsetPercent: 10});
593593
</code>
@@ -622,6 +622,16 @@ <h2>Trigger</h2>
622622

623623
<section id="releasehistory">
624624
<h2>Release History</h2>
625+
<h4>0.6.0</h4>
626+
<ul>
627+
<li>Adding horizontal checks for sideways scrolling.</li>
628+
</ul>
629+
630+
<h4>0.5.2</h4>
631+
<ul>
632+
<li>Tiny comment fix.</li>
633+
</ul>
634+
625635
<h4>0.5.1</h4>
626636
<ul>
627637
<li>Loaded state fired, if possible, when media actually loads, not simply triggered by viewport position. See <a href="https://github.com/sjwilliams/laziestloader/issues/8">Issue 8</a>.</li>

‎jquery.laziestloader.js

+15-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* @preserve LaziestLoader - v0.5.2 - 2015-09-24
2+
* @preserve LaziestLoader - v0.6.0 - 2015-09-24
33
* A responsive lazy loader for jQuery.
44
* http://sjwilliams.github.io/laziestloader/
55
* Copyright (c) 2014 Josh Williams; Licensed MIT
@@ -196,18 +196,21 @@
196196
*/
197197

198198
function laziestloader() {
199-
var $inview = $elements.not($loaded).filter(function() {
200-
var $el = $(this),
201-
threshold = options.threshold;
202-
203-
if ($el.is(':hidden')) return;
199+
var docEl = document.documentElement;
200+
var wHeight = window.innerHeight || docEl.clientHeight;
201+
var wWidth = window.innerWidth || docEl.clientWidth;
202+
var threshold = options.threshold;
204203

205-
var wt = $w.scrollTop(),
206-
wb = wt + $w.height(),
207-
et = $el.offset().top,
208-
eb = et + $el.height();
209-
210-
return eb >= wt - threshold && et <= wb + threshold;
204+
var $inview = $elements.not($loaded).filter(function() {
205+
if ($(this).is(':hidden')) return;
206+
var rect = $(this)[0].getBoundingClientRect();
207+
208+
return (
209+
rect.bottom + threshold > 0 &&
210+
rect.right + threshold > 0 &&
211+
rect.left < wWidth + threshold &&
212+
rect.top < wHeight + threshold
213+
);
211214
});
212215

213216
$inview.trigger('laziestloader');

‎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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "laziestloader",
3-
"version": "0.5.2",
3+
"version": "0.6.0",
44
"author": "Josh Williams <contact@joshwilliams.com>",
5-
"description": "A responsive-aware jQuery plugin to smartly lazy load images and other elements.",
5+
"description": "A responsive-aware jQuery plugin to smartly lazy load images and trigger callbacks.",
66
"repository": {
77
"type": "git",
88
"url": "https://github.com/sjwilliams/laziestloader.git"

0 commit comments

Comments
 (0)