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
92
93
94
95
|
'use strict';
const round = Math.round;
// image width.
const imgW = 400;
// Gallery using bricks.js ////////////////////////////////////////////////////
const sizes = [
{ columns: 1, gutter: 30 },
{ mq: round((imgW * 2.2) + 40) + "px", columns: 2, gutter: 40 },
{ mq: round((imgW * 3.5) + 50) + "px", columns: 3, gutter: 50 },
{ mq: round((imgW * 4.5) + 50) + "px", columns: 4, gutter: 50 },
{ mq: round((imgW * 5.5) + 60) + "px", columns: 5, gutter: 60 },
];
const bricks = Bricks({
container: '#gallery',
packed: 'data-packed',
sizes: sizes
});
bricks
.on('pack', () => console.log('ALL grid items packed.'))
.on('update', () => console.log('NEW grid items packed.'))
.on('resize', size => console.log(
'The grid has be re-packed to accommodate a new BREAKPOINT.', size
));
document.addEventListener('DOMContentLoaded', event => {
bricks.resize(true); // bind resize handler
});
// Packing after loading images ////////////////////////////////////////////
const onImagesLoaded = (container, event) => {
const images = container.getElementsByTagName("img");
const progressBar = document.getElementById("loading-progress");
// failed keeps track of images that failed to load.
let failed = 0;
let remaining = images.length;
for (let i = 0; i < images.length; i++) {
if (images[i].complete)
remaining--;
else {
// Add listeners to images that have to be loaded.
images[i].addEventListener("load", function () {
remaining--;
progressBar.value = round(
((images.length - remaining) / images.length) * 100
);
if (remaining === failed)
event(remaining, failed, progressBar);
});
// If loading fails then we increment failed, an error
// will be shown later.
images[i].addEventListener("error", function () {
failed++;
if (remaining === failed)
event(remaining, failed, progressBar);
});
}
if (remaining == failed)
event(remaining, failed, progressBar);
}
};
const gallery = document.getElementById("gallery");
const imagesLoaded = (remaining, failed, progressBar) => {
bricks.pack(); // packing images
progressBar.value = 100;
document.getElementById("loading").style.display = "none";
// Show error on failure.
const loadError = document.getElementById("loading-error");
const loadErrorText = document.getElementById("loading-error-text");
const loadErrorDismiss = document.getElementById("loading-error-dismiss");
if (failed !== 0) {
loadError.style.display = "block";
const t = failed === 1 ? "image" : "images";
loadErrorText.innerHTML = `${failed} ${t} failed to load.`;
loadErrorDismiss.addEventListener('click', function(){
loadError.style.display = "none";
});
}
};
onImagesLoaded(gallery, imagesLoaded);
|