Skip to content

Commit 71dcefc

Browse files
malchatamalchata
committed
Lazy load video feature (needs IE11 testing).
1 parent 697a736 commit 71dcefc

File tree

5 files changed

+58
-28
lines changed

5 files changed

+58
-28
lines changed

‎dist/yall-1.1.2.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/yall-1.2.0.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "yall",
3-
"version": "1.1.2",
3+
"version": "1.2.0",
44
"description": "Yet Another Lazy Loader",
55
"main": "./src/yall.js",
66
"scripts": {

‎src/yall.js‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/**
2-
* yall.js version 1.1.2
2+
* yall.js version 1.2.0
33
* Yet Another Lazy loader
44
**/
55

66
(function(window, document){
77
var
88
// The primary goal here is to keep this script as small as possible
99
// while maintaining functionality. The uglifier goes a long way,
10-
// but we can take things a bit farther by saving strings for
10+
// but we can take things a bit farther by saving references for
1111
// frequently used method and strings.
1212
fe = "forEach",
1313
qsa = "querySelectorAll",
@@ -16,7 +16,11 @@
1616
pr = "prototype",
1717
io = "IntersectionObserver",
1818
ioe = io + "Entry",
19-
dss = "data-srcset",
19+
s = "src",
20+
ss = "srcset",
21+
d = "data-",
22+
ds = d + s,
23+
dss = d + ss,
2024
// Placeholders used for event handler strings.
2125
documentEvents = ["scroll", "touchmove"],
2226
windowEvents = ["orientationchange", "resize"],
@@ -33,19 +37,29 @@
3337
node.removeAttribute(sourceAttr);
3438
}
3539
},
36-
// The handler to load the image
37-
loadImage = function(img){
38-
if(img[pn].tagName == "PICTURE"){
39-
Array[pr].slice.call(img[pn][qsa]("source"))[fe](function(source){
40-
replaceAttr(source, dss, "srcset");
40+
// The handler to load the media
41+
loadMedia = function(media){
42+
if(media.tagName == "VIDEO"){
43+
media[qsa]("source")[fe](function(source){
44+
replaceAttr(source, ds, s);
4145
});
46+
47+
media.load();
48+
}
49+
else{
50+
if(media[pn].tagName == "PICTURE"){
51+
Array[pr].slice.call(media[pn][qsa]("source"))[fe](function(source){
52+
replaceAttr(source, dss, ss);
53+
});
54+
}
55+
56+
replaceAttr(media, ds, s);
57+
replaceAttr(media, dss, ss);
4258
}
4359

44-
replaceAttr(img, "data-src", "src");
45-
replaceAttr(img, dss, "srcset");
46-
img.classList.remove("lazy");
60+
media.classList.remove("lazy");
4761
elements = elements.filter(function(e){
48-
return e !== img;
62+
return e !== media;
4963
});
5064
},
5165
// A multiple event binding handler.
@@ -67,9 +81,9 @@
6781
active = 1;
6882

6983
setTimeout(function(){
70-
elements[fe](function(img){
71-
if((img[gbcr]().top <= window.innerHeight && img[gbcr]().bottom >= 0) && getComputedStyle(img).display != "none"){
72-
loadImage(img);
84+
elements[fe](function(media){
85+
if((media[gbcr]().top <= window.innerHeight && media[gbcr]().bottom >= 0) && getComputedStyle(media).display != "none"){
86+
loadMedia(media);
7387
}
7488
});
7589

@@ -80,23 +94,23 @@
8094

8195
// Everything's kicked off on DOMContentLoaded
8296
multiBind(document, ["DOMContentLoaded"], function(){
83-
elements = Array[pr].slice.call(document[qsa]("img.lazy"));
97+
elements = Array[pr].slice.call(document[qsa](".lazy"));
8498

85-
// We're only going to do stuff if we found `img.lazy` elements
99+
// We're only going to do stuff if we found `.lazy` elements
86100
if(elements.length){
87101
// This compatibility check has been taken from https://github.com/WICG/IntersectionObserver/blob/gh-pages/polyfill/intersection-observer.js
88102
if(io in window && ioe in window && "intersectionRatio" in window[ioe][pr]){
89-
var imageObserver = new window[io](function(entries, observer){
103+
var mediaObserver = new window[io](function(entries, observer){
90104
entries[fe](function(entry){
91105
if(entry.isIntersecting){
92-
loadImage(entry.target);
93-
imageObserver.unobserve(entry.target);
106+
loadMedia(entry.target);
107+
mediaObserver.unobserve(entry.target);
94108
}
95109
});
96110
});
97111

98-
elements[fe](function(img){
99-
imageObserver.observe(img);
112+
elements[fe](function(media){
113+
mediaObserver.observe(media);
100114
});
101115
}
102116
else{

‎test/index.html‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,10 @@
3636
list-style: none;
3737
}
3838

39-
img+h2,
40-
picture+h2,
41-
noscript+h2{
39+
img + h2,
40+
picture + h2,
41+
noscript + h2,
42+
video + h2{
4243
margin-top: 128rem;
4344
}
4445

@@ -57,6 +58,7 @@ <h3>Or jump to...</h3>
5758
<li><a href="#src">Lazy loading <code>&lt;img&gt;</code> using <code>src</code></a></li>
5859
<li><a href="#srcset">Lazy loading <code>&lt;img&gt;</code> using <code>srcset</code></a></li>
5960
<li><a href="#picture">Lazy loading <code>&lt;picture&gt;</code></a></li>
61+
<li><a href="#video">Lazy loading <code>&lt;video&gt;</code></a></li>
6062
</ul>
6163
<h2>Lazy loading <code>&lt;img&gt;</code> using <code>src</code></h2>
6264
<a name="src"></a>
@@ -84,6 +86,20 @@ <h2>Lazy loading <code>&lt;picture&gt;</code></h2>
8486
<img src="test-768w.jpg" alt="&lt;noscript&gt; fallback for &lt;img&gt; with src" title="&lt;noscript&gt; fallback for &lt;img&gt; with src">
8587
</picture>
8688
</noscript>
87-
<script src="../dist/yall-1.1.2.min.js" defer></script>
89+
<h2>Lazy loading <code>&lt;video&gt;</code></h2>
90+
<a name="video"></a>
91+
<video class="lazy" width="500" height="213" poster="https://res.cloudinary.com/drp9iwjqz/image/upload/f_auto,q_auto/v1508295315/jeremywagner.me/using-webp-images/bateman-1-placeholder.jpg" autoplay loop muted>
92+
<source data-src="https://res.cloudinary.com/drp9iwjqz/video/upload/v1509066934/bateman_xrk1jh.webm" type="video/webm">
93+
<source data-src="https://res.cloudinary.com/drp9iwjqz/video/upload/v1509066934/bateman_xrk1jh.ogv" type="video/ogg">
94+
<source data-src="https://res.cloudinary.com/drp9iwjqz/video/upload/v1509066934/bateman_xrk1jh.mp4" type="video/mp4">
95+
</video>
96+
<noscript>
97+
<video width="500" height="213" poster="https://res.cloudinary.com/drp9iwjqz/image/upload/f_auto,q_auto/v1508295315/jeremywagner.me/using-webp-images/bateman-1-placeholder.jpg" autoplay loop muted>
98+
<source src="https://res.cloudinary.com/drp9iwjqz/video/upload/v1509066934/bateman_xrk1jh.webm" type="video/webm">
99+
<source src="https://res.cloudinary.com/drp9iwjqz/video/upload/v1509066934/bateman_xrk1jh.ogv" type="video/ogg">
100+
<source src="https://res.cloudinary.com/drp9iwjqz/video/upload/v1509066934/bateman_xrk1jh.mp4" type="video/mp4">
101+
</video>
102+
</noscript>
103+
<script src="../dist/yall-1.2.0.min.js" defer></script>
88104
</body>
89105
</html>

0 commit comments

Comments
 (0)