Skip to content
This repository was archived by the owner on Jan 10, 2021. It is now read-only.

Commit c8d04ad

Browse files
OlehDutchenkoOlehDutchenko
authored
Merge pull request #15 from dutchenkoOleg/master
0.4.0 srcset
2 parents 4dc8713 + 7b18fa4 commit c8d04ad

File tree

5 files changed

+111
-47
lines changed

5 files changed

+111
-47
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
[![WezomAgency](https://img.shields.io/badge/wezom-agency-red.svg)](https://github.com/WezomAgency)
66
[![Javascript Style Guide](https://img.shields.io/badge/code_style-wezom_relax-red.svg)](https://github.com/WezomAgency/eslint-config-wezom-relax)
77

8-
### _Status WIP_
8+
---
9+
10+
### _**Status WIP**_
911

1012
---
1113

@@ -22,6 +24,7 @@
2224
| No dependencies | _**Yes**_ | _**Yes**_ |
2325
| Transpiled ES5 + `.min` | _**Yes**_ | _**Yes**_ |
2426
| IntersectionObserver | _**Yes**_ | _**Yes**_ |
27+
| Supports `srcset` attribute for `<img>` | _**Yes**_ | _**Yes**_ |
2528
| Supports `picture` element | _**Yes**_ | _**Yes**_ |
2629
| Supports `iframe` element | _**Yes**_ | _**Yes**_ |
2730
| Custom `load()` method | _**Yes**_ | _No_ |

‎dist/zz-load.js‎

Lines changed: 57 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,26 @@ var zzLoad = (function () {
4949
isFailed: 'data-zzload-is-failed',
5050
isInView: 'data-zzload-is-inview',
5151
sourceImg: 'data-zzload-source-img',
52+
sourceSrcSet: 'data-zzload-source-srcset',
5253
sourceBgImg: 'data-zzload-source-background-img',
5354
sourceImage: 'data-zzload-source-image',
5455
sourceIframe: 'data-zzload-source-iframe',
5556
sourceContainer: 'data-zzload-container',
5657
sourceInview: 'data-zzload-inview'
5758
};
59+
/**
60+
* @param {HTMLElement} element
61+
* @private
62+
*/
63+
64+
var _sanitaze = function _sanitaze(element) {
65+
element.removeAttribute(_attrs.sourceImg);
66+
element.removeAttribute(_attrs.sourceSrcSet);
67+
element.removeAttribute(_attrs.sourceBgImg);
68+
element.removeAttribute(_attrs.sourceImage);
69+
element.removeAttribute(_attrs.sourceIframe);
70+
element.removeAttribute(_attrs.sourceContainer);
71+
};
5872
/**
5973
* @param {Element} element
6074
* @param {Function} onLoad
@@ -64,6 +78,7 @@ var zzLoad = (function () {
6478
* @private
6579
*/
6680

81+
6782
var _load = function _load(element, onLoad, onError, asPromise) {
6883
/**
6984
* @param {Function} [resolve]
@@ -75,16 +90,20 @@ var zzLoad = (function () {
7590

7691
var img = document.createElement('img');
7792

78-
function onload() {
79-
var src = this.src;
80-
93+
var loadActions = function loadActions(src) {
8194
_markAs.loaded(element, src);
8295

8396
onLoad(element, src);
8497

8598
if (resolve) {
8699
resolve(element, src);
87100
}
101+
};
102+
103+
function onload() {
104+
_sanitaze(element);
105+
106+
loadActions(this.src);
88107
}
89108

90109
function onerror() {
@@ -105,6 +124,13 @@ var zzLoad = (function () {
105124
var source = element.getAttribute(_attrs.sourceImg);
106125

107126
if (source) {
127+
var srcset = element.getAttribute(_attrs.sourceSrcSet);
128+
129+
if (srcset) {
130+
img.srcset = srcset;
131+
element.srcset = srcset;
132+
}
133+
108134
img.src = source;
109135
element.src = source;
110136
return null;
@@ -149,18 +175,22 @@ var zzLoad = (function () {
149175

150176
if (pitureImg instanceof window.HTMLImageElement) {
151177
var currentSrc = pitureImg.currentSrc.replace(patter, '');
152-
var sources = null;
178+
var src = null;
179+
var _srcset = null;
153180

154181
for (var i = 0; i < element.children.length; i++) {
155182
var child = element.children[i];
156-
var childSrc = child.nodeName.toLowerCase() === 'source' ? child.srcset : child.src;
183+
var isSource = child.nodeName.toLowerCase() === 'source';
184+
var isImg = child.nodeName.toLowerCase() === 'img';
185+
var childSrc = isSource ? child.srcset : isImg ? child.src : '';
157186

158187
if (currentSrc === childSrc.replace(patter, '')) {
159-
sources = child.dataset.zzloadSourcePicture || null;
188+
src = child.getAttribute(_attrs.sourceImg) || null;
189+
_srcset = child.getAttribute(_attrs.sourceSrcSet);
160190
}
161191
}
162192

163-
if (sources === null) {
193+
if (src === null) {
164194
console.warn('Must provide `data-zzload-source-picture` on all children elements');
165195
console.warn(element);
166196
return null;
@@ -170,30 +200,33 @@ var zzLoad = (function () {
170200
for (var _i = 0; _i < element.children.length; _i++) {
171201
var _child = element.children[_i];
172202

173-
if (_child.nodeName.toLowerCase() === 'source') {
174-
_child.srcset = _child.dataset.zzloadSourcePicture;
175-
} else {
176-
_child.src = _child.dataset.zzloadSourcePicture;
177-
}
178-
}
203+
var _src = _child.getAttribute(_attrs.sourceImg);
179204

180-
var src = img.currentSrc;
205+
var _srcset2 = _child.getAttribute(_attrs.sourceSrcSet);
181206

182-
_markAs.loaded(element, src);
207+
if (_child.nodeName.toLowerCase() === 'source') {
208+
if (_srcset2) {
209+
_src += ', ' + _srcset2;
210+
}
211+
212+
_child.srcset = _src;
213+
} else if (_child.nodeName.toLowerCase() === 'img') {
214+
if (_srcset2) {
215+
_child.srcset = _srcset2;
216+
}
183217

184-
onLoad(element, src);
218+
_child.src = _src;
219+
}
185220

186-
if (resolve) {
187-
resolve(element, src);
221+
_sanitaze(_child);
188222
}
189-
};
190223

191-
sources = sources.split(',');
192-
var src = sources.shift();
193-
var srcset = sources.join(',').replace(/^\s+/m, '');
224+
var src = img.currentSrc;
225+
loadActions(src);
226+
};
194227

195-
if (srcset) {
196-
img.srcset = srcset;
228+
if (_srcset) {
229+
img.srcset = _srcset;
197230
}
198231

199232
img.src = src;

‎dist/zz-load.min.js‎

Lines changed: 1 addition & 1 deletion
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": "zz-load",
3-
"version": "0.2.1",
3+
"version": "0.4.0",
44
"description": "",
55
"main": "zz-load.es.js",
66
"scripts": {

‎zz-load.es.js‎

Lines changed: 48 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,27 @@ const _attrs = {
4444
isFailed: 'data-zzload-is-failed',
4545
isInView: 'data-zzload-is-inview',
4646
sourceImg: 'data-zzload-source-img',
47+
sourceSrcSet: 'data-zzload-source-srcset',
4748
sourceBgImg: 'data-zzload-source-background-img',
4849
sourceImage: 'data-zzload-source-image',
4950
sourceIframe: 'data-zzload-source-iframe',
5051
sourceContainer: 'data-zzload-container',
5152
sourceInview: 'data-zzload-inview'
5253
};
5354

55+
/**
56+
* @param {HTMLElement} element
57+
* @private
58+
*/
59+
const _sanitaze = element => {
60+
element.removeAttribute(_attrs.sourceImg);
61+
element.removeAttribute(_attrs.sourceSrcSet);
62+
element.removeAttribute(_attrs.sourceBgImg);
63+
element.removeAttribute(_attrs.sourceImage);
64+
element.removeAttribute(_attrs.sourceIframe);
65+
element.removeAttribute(_attrs.sourceContainer);
66+
};
67+
5468
/**
5569
* @param {Element} element
5670
* @param {Function} onLoad
@@ -69,13 +83,17 @@ const _load = (element, onLoad, onError, asPromise) => {
6983
_markAs.processed(element);
7084
let img = document.createElement('img');
7185

72-
function onload () {
73-
const src = this.src;
86+
const loadActions = (src) => {
7487
_markAs.loaded(element, src);
7588
onLoad(element, src);
7689
if (resolve) {
7790
resolve(element, src);
7891
}
92+
};
93+
94+
function onload () {
95+
_sanitaze(element);
96+
loadActions(this.src);
7997
}
8098

8199
function onerror () {
@@ -93,6 +111,11 @@ const _load = (element, onLoad, onError, asPromise) => {
93111
// img
94112
let source = element.getAttribute(_attrs.sourceImg);
95113
if (source) {
114+
let srcset = element.getAttribute(_attrs.sourceSrcSet);
115+
if (srcset) {
116+
img.srcset = srcset;
117+
element.srcset = srcset;
118+
}
96119
img.src = source;
97120
element.src = source;
98121
return null;
@@ -132,44 +155,49 @@ const _load = (element, onLoad, onError, asPromise) => {
132155
const patter = /^(http(s)?:)?\/\//i;
133156
if (pitureImg instanceof window.HTMLImageElement) {
134157
let currentSrc = pitureImg.currentSrc.replace(patter, '');
135-
let sources = null;
158+
let src = null;
159+
let srcset = null;
136160

137161
for (let i = 0; i < element.children.length; i++) {
138162
const child = element.children[i];
139-
const childSrc = (child.nodeName.toLowerCase() === 'source') ? child.srcset : child.src;
163+
const isSource = child.nodeName.toLowerCase() === 'source';
164+
const isImg = child.nodeName.toLowerCase() === 'img';
165+
const childSrc = isSource ? child.srcset : isImg ? child.src : '';
140166
if (currentSrc === childSrc.replace(patter, '')) {
141-
sources = child.dataset.zzloadSourcePicture || null;
167+
src = child.getAttribute(_attrs.sourceImg) || null;
168+
srcset = child.getAttribute(_attrs.sourceSrcSet);
142169
}
143170
}
144171

145-
if (sources === null) {
172+
if (src === null) {
146173
console.warn('Must provide `data-zzload-source-picture` on all children elements');
147174
console.warn(element);
148175
return null;
149176
}
150177

151178
img.onload = function onload () {
152179
for (let i = 0; i < element.children.length; i++) {
153-
const child = element.children[i];
180+
let child = element.children[i];
181+
let src = child.getAttribute(_attrs.sourceImg);
182+
let srcset = child.getAttribute(_attrs.sourceSrcSet);
183+
154184
if (child.nodeName.toLowerCase() === 'source') {
155-
child.srcset = child.dataset.zzloadSourcePicture;
156-
} else {
157-
child.src = child.dataset.zzloadSourcePicture;
185+
if (srcset) {
186+
src += (', ' + srcset);
187+
}
188+
child.srcset = src;
189+
} else if (child.nodeName.toLowerCase() === 'img') {
190+
if (srcset) {
191+
child.srcset = srcset;
192+
}
193+
child.src = src;
158194
}
195+
_sanitaze(child);
159196
}
160-
161197
const src = img.currentSrc;
162-
_markAs.loaded(element, src);
163-
onLoad(element, src);
164-
if (resolve) {
165-
resolve(element, src);
166-
}
198+
loadActions(src);
167199
};
168200

169-
sources = sources.split(',');
170-
const src = sources.shift();
171-
const srcset = sources.join(',').replace(/^\s+/m, '');
172-
173201
if (srcset) {
174202
img.srcset = srcset;
175203
}

0 commit comments

Comments
 (0)