-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
91 lines (77 loc) · 2.95 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
document.addEventListener("DOMContentLoaded", (event) => {
const imagesListContainer = document.querySelector('.images-list');
const spinner = document.querySelector('.spinner');
const startBtn = document.querySelector('.start-btn');
const errMsg = document.querySelector('.err-msg');
const limit = 20; /* IMAGES PER PAGE */
const className = {
fadeIn: 'fadeIn',
lazyLoading: 'lazy-loading',
lastImg: 'last-img',
hide: 'hide'
}
let start = 0; /* START FROM PAGE NUMBER */
let firstInit = false;
let lazyTargets;
/* RUN APP ON CLICK */
startBtn.addEventListener('click', (e) => {
startBtn.classList.add(className.hide)
spinner.classList.remove(className.hide);
getImagesList();
});
/* GET LIST OF IMAGES */
const getImagesList = () => {
if (firstInit) {
start += limit;
} else {
firstInit = true;
}
fetch(`https://jsonplaceholder.typicode.com/photos?_start=${start}&_limit=${limit}`)
.then((response) => {
return response.json();
})
.then((data) => {
spinner.classList.remove(className.hide);
createNewImages(data)
}).catch((err) => {
errMsg.textContent = `Oops something went wrong!!! Try again later.`
startBtn.classList.remove(className.hide)
spinner.classList.add(className.hide);
})
}
/* CREATE NEW IMAGES WITH EMPTY SRC */
const createNewImages = (list) => {
list.forEach(el => {
const img = document.createElement('img');
img.width = 300;
img.height = 250;
img.dataset.lazyLoadUrl = el.url;
img.classList.add(className.lazyLoading);
imagesListContainer.appendChild(img);
})
/* ADD OBSERVER FOR EACH IMG */
lazyTargets = document.querySelectorAll('.lazy-loading');
/* ADD CLASS TO CHECK LAST IMG LOADED AND WE NEED TO GET NEW PACK OF IMAGES */
lazyTargets[lazyTargets.length - 1].classList.add(className.lastImg);
lazyTargets.forEach(lazyLoad);
}
/* FILL IMG SRC AND LOAD IMG */
const lazyLoad = (target) => {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.setAttribute('src', img.dataset.lazyLoadUrl);
img.classList.add(className.fadeIn);
if (img.classList.contains(className.lastImg)) {
spinner.classList.remove(className.hide);
img.classList.remove(className.lastImg);
getImagesList();
}
observer.disconnect();
}
});
});
observer.observe(target);
}
});