Skip to content

Commit 83fd88b

Browse files
srogiersrogier
authored
Picture tag can now handle an inside img tag if it exists (#225)
* Picture tag can now handle an inside img tag if it exists * Add documentation * Add tests
1 parent 584be41 commit 83fd88b

File tree

6 files changed

+68
-11
lines changed

6 files changed

+68
-11
lines changed

‎README.md

+12
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,18 @@ Create _a broken_ picture element structure.
236236

237237
When _lozad_ loads this picture element, it will fix it.
238238

239+
If you want to use image placeholder (like low quality image placeholder), you can set a temporary `img` tag inside your `picture` tag. It will be removed when _lozad_ loads the picture element.
240+
241+
```html
242+
<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
243+
<source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
244+
<source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
245+
<source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
246+
<!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
247+
<img src="data:image/jpeg;base64,/some_lqip_in_base_64==" />
248+
</picture>
249+
```
250+
239251
## Example with video
240252

241253
```html

‎dist/lozad.es.js

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! lozad.js - v1.15.0 - 2020-08-01
1+
/*! lozad.js - v1.15.0 - 2020-09-05
22
* https://github.com/ApoorvSaxena/lozad.js
33
* Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
44

@@ -15,7 +15,14 @@ const defaultConfig = {
1515
threshold: 0,
1616
load(element) {
1717
if (element.nodeName.toLowerCase() === 'picture') {
18-
const img = document.createElement('img');
18+
let img = element.querySelector('img');
19+
let append = false;
20+
21+
if (img === null) {
22+
img = document.createElement('img');
23+
append = true;
24+
}
25+
1926
if (isIE && element.getAttribute('data-iesrc')) {
2027
img.src = element.getAttribute('data-iesrc');
2128
}
@@ -24,7 +31,9 @@ const defaultConfig = {
2431
img.alt = element.getAttribute('data-alt');
2532
}
2633

27-
element.append(img);
34+
if (append) {
35+
element.append(img);
36+
}
2837
}
2938

3039
if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {

‎dist/lozad.js

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! lozad.js - v1.15.0 - 2020-08-01
1+
/*! lozad.js - v1.15.0 - 2020-09-05
22
* https://github.com/ApoorvSaxena/lozad.js
33
* Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
44

@@ -21,7 +21,14 @@
2121
threshold: 0,
2222
load: function load(element) {
2323
if (element.nodeName.toLowerCase() === 'picture') {
24-
var img = document.createElement('img');
24+
var img = element.querySelector('img');
25+
var append = false;
26+
27+
if (img === null) {
28+
img = document.createElement('img');
29+
append = true;
30+
}
31+
2532
if (isIE && element.getAttribute('data-iesrc')) {
2633
img.src = element.getAttribute('data-iesrc');
2734
}
@@ -30,7 +37,9 @@
3037
img.alt = element.getAttribute('data-alt');
3138
}
3239

33-
element.append(img);
40+
if (append) {
41+
element.append(img);
42+
}
3443
}
3544

3645
if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {

‎dist/lozad.min.js

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

‎src/lozad.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@ const defaultConfig = {
1010
threshold: 0,
1111
load(element) {
1212
if (element.nodeName.toLowerCase() === 'picture') {
13-
const img = document.createElement('img')
13+
let img = element.querySelector('img')
14+
let append = false
15+
16+
if (img === null) {
17+
img = document.createElement('img')
18+
append = true
19+
}
20+
1421
if (isIE && element.getAttribute('data-iesrc')) {
1522
img.src = element.getAttribute('data-iesrc')
1623
}
@@ -19,7 +26,9 @@ const defaultConfig = {
1926
img.alt = element.getAttribute('data-alt')
2027
}
2128

22-
element.append(img)
29+
if (append) {
30+
element.append(img)
31+
}
2332
}
2433

2534
if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {

‎test/index.js

+18
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,24 @@ describe('lozad', () => {
336336
const img = picture.children[1]
337337
assert.strictEqual('alt text', img.getAttribute('alt'))
338338
})
339+
340+
it('should use img tag if inside the picture', () => {
341+
const className = 'test-class'
342+
const observer = lozad('.' + className)
343+
const picture = document.querySelectorAll('picture')[0]
344+
picture.setAttribute('class', className)
345+
346+
const initialImage = document.createElement('img')
347+
initialImage.setAttribute('customAttribute', 'custom value')
348+
picture.appendChild(initialImage)
349+
observer.observe()
350+
351+
const img = picture.children[1]
352+
assert.strictEqual(
353+
initialImage.getAttribute('customAttribute'),
354+
img.getAttribute('customAttribute')
355+
)
356+
})
339357
})
340358

341359
describe('toggle class', () => {

0 commit comments

Comments
 (0)