Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2ddd1de

Browse files
Feat: img lazy loaded
add lozad.js for image lazy loaded.
1 parent c695c79 commit 2ddd1de

File tree

3 files changed

+653
-470
lines changed

3 files changed

+653
-470
lines changed

‎assets/js/lozad.js‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
/*! lozad.js - v1.14.0 - 2019年10月19日
2+
* https://github.com/ApoorvSaxena/lozad.js
3+
* Copyright (c) 2019 Apoorv Saxena; Licensed MIT */
4+
5+
6+
(function (global, factory) {
7+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
8+
typeof define === 'function' && define.amd ? define(factory) :
9+
(global = global || self, global.lozad = factory());
10+
}(this, function () { 'use strict';
11+
12+
/**
13+
* Detect IE browser
14+
* @const {boolean}
15+
* @private
16+
*/
17+
var isIE = typeof document !== 'undefined' && document.documentMode;
18+
19+
var defaultConfig = {
20+
rootMargin: '0px',
21+
threshold: 0,
22+
load: function load(element) {
23+
if (element.nodeName.toLowerCase() === 'picture') {
24+
var img = document.createElement('img');
25+
if (isIE && element.getAttribute('data-iesrc')) {
26+
img.src = element.getAttribute('data-iesrc');
27+
}
28+
29+
if (element.getAttribute('data-alt')) {
30+
img.alt = element.getAttribute('data-alt');
31+
}
32+
33+
element.append(img);
34+
}
35+
36+
if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {
37+
if (element.children) {
38+
var childs = element.children;
39+
var childSrc = void 0;
40+
for (var i = 0; i <= childs.length - 1; i++) {
41+
childSrc = childs[i].getAttribute('data-src');
42+
if (childSrc) {
43+
childs[i].src = childSrc;
44+
}
45+
}
46+
47+
element.load();
48+
}
49+
}
50+
51+
if (element.getAttribute('data-src')) {
52+
element.src = element.getAttribute('data-src');
53+
}
54+
55+
if (element.getAttribute('data-srcset')) {
56+
element.setAttribute('srcset', element.getAttribute('data-srcset'));
57+
}
58+
59+
if (element.getAttribute('data-background-image')) {
60+
element.style.backgroundImage = 'url(\'' + element.getAttribute('data-background-image').split(',').join('\'),url(\'') + '\')';
61+
} else if (element.getAttribute('data-background-image-set')) {
62+
var imageSetLinks = element.getAttribute('data-background-image-set').split(',');
63+
var firstUrlLink = imageSetLinks[0].substr(0, imageSetLinks[0].indexOf(' ')) || imageSetLinks[0]; // Substring before ... 1x
64+
firstUrlLink = firstUrlLink.indexOf('url(') === -1 ? 'url(' + firstUrlLink + ')' : firstUrlLink;
65+
if (imageSetLinks.length === 1) {
66+
element.style.backgroundImage = firstUrlLink;
67+
} else {
68+
element.setAttribute('style', (element.getAttribute('style') || '') + ('background-image: ' + firstUrlLink + '; background-image: -webkit-image-set(' + imageSetLinks + '); background-image: image-set(' + imageSetLinks + ')'));
69+
}
70+
}
71+
72+
if (element.getAttribute('data-toggle-class')) {
73+
element.classList.toggle(element.getAttribute('data-toggle-class'));
74+
}
75+
},
76+
loaded: function loaded() {}
77+
};
78+
79+
function markAsLoaded(element) {
80+
element.setAttribute('data-loaded', true);
81+
}
82+
83+
var isLoaded = function isLoaded(element) {
84+
return element.getAttribute('data-loaded') === 'true';
85+
};
86+
87+
var onIntersection = function onIntersection(load, loaded) {
88+
return function (entries, observer) {
89+
entries.forEach(function (entry) {
90+
if (entry.intersectionRatio > 0 || entry.isIntersecting) {
91+
observer.unobserve(entry.target);
92+
93+
if (!isLoaded(entry.target)) {
94+
load(entry.target);
95+
markAsLoaded(entry.target);
96+
loaded(entry.target);
97+
}
98+
}
99+
});
100+
};
101+
};
102+
103+
var getElements = function getElements(selector) {
104+
var root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
105+
106+
if (selector instanceof Element) {
107+
return [selector];
108+
}
109+
110+
if (selector instanceof NodeList) {
111+
return selector;
112+
}
113+
114+
return root.querySelectorAll(selector);
115+
};
116+
117+
function lozad () {
118+
var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '.lozad';
119+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
120+
121+
var _Object$assign = Object.assign({}, defaultConfig, options),
122+
root = _Object$assign.root,
123+
rootMargin = _Object$assign.rootMargin,
124+
threshold = _Object$assign.threshold,
125+
load = _Object$assign.load,
126+
loaded = _Object$assign.loaded;
127+
128+
var observer = void 0;
129+
130+
if (typeof window !== 'undefined' && window.IntersectionObserver) {
131+
observer = new IntersectionObserver(onIntersection(load, loaded), {
132+
root: root,
133+
rootMargin: rootMargin,
134+
threshold: threshold
135+
});
136+
}
137+
138+
return {
139+
observe: function observe() {
140+
var elements = getElements(selector, root);
141+
142+
for (var i = 0; i < elements.length; i++) {
143+
if (isLoaded(elements[i])) {
144+
continue;
145+
}
146+
147+
if (observer) {
148+
observer.observe(elements[i]);
149+
continue;
150+
}
151+
152+
load(elements[i]);
153+
markAsLoaded(elements[i]);
154+
loaded(elements[i]);
155+
}
156+
},
157+
triggerLoad: function triggerLoad(element) {
158+
if (isLoaded(element)) {
159+
return;
160+
}
161+
162+
load(element);
163+
markAsLoaded(element);
164+
loaded(element);
165+
},
166+
167+
observer: observer
168+
};
169+
}
170+
171+
return lozad;
172+
173+
}));

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /