blob: 7c00003f5341e11decc45b1dd76830e64320d455 (
plain) (
blame)
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
/* jshint strict: false */
var progressElem, statusElem;
var supportsProgress;
var loadedImageCount, imageCount;
var container = document.querySelector('#image-container');
statusElem = document.querySelector('#status');
progressElem = document.querySelector('progress');
supportsProgress = progressElem &&
// IE does not support progress
progressElem.toString().indexOf('Unknown') === -1;
document.querySelector('#add').onclick = function() {
// add new images
var fragment = getItemsFragment();
container.insertBefore( fragment, container.firstChild );
// use ImagesLoaded
var imgLoad = imagesLoaded( container );
imgLoad.on( 'progress', onProgress );
imgLoad.on( 'always', onAlways );
// reset progress counter
imageCount = imgLoad.images.length;
resetProgress();
updateProgress( 0 );
};
// reset container
document.querySelector('#reset').onclick = function() {
empty( container );
};
// ----- set text helper ----- //
var docElem = document.documentElement;
var textSetter = docElem.textContent !== undefined ? 'textContent' : 'innerText';
function setText( elem, value ) {
elem[ textSetter ] = value;
}
function empty( elem ) {
while ( elem.firstChild ) {
elem.removeChild( elem.firstChild );
}
}
// ----- ----- //
// return doc fragment with
function getItemsFragment() {
var fragment = document.createDocumentFragment();
for ( var i = 0; i < 7; i++ ) {
var item = getImageItem();
fragment.appendChild( item );
}
return fragment;
}
// return an <li> with a <img> in it
function getImageItem() {
var item = document.createElement('li');
item.className = 'is-loading';
var img = document.createElement('img');
var size = Math.random() * 3 + 1;
var width = Math.random() * 110 + 100;
width = Math.round( width * size );
var height = Math.round( 140 * size );
var rando = Math.ceil( Math.random() * 1000 );
// 10% chance of broken image src
// random parameter to prevent cached images
img.src = rando < 100 ? '//foo/broken-' + rando + '.jpg' :
// use picsum for great random images
'https://picsum.photos/' + width + '/' + height + '/' + '?random';
item.appendChild( img );
return item;
}
// ----- ----- //
function resetProgress() {
statusElem.style.opacity = 1;
loadedImageCount = 0;
if ( supportsProgress ) {
progressElem.setAttribute( 'max', imageCount );
}
}
function updateProgress( value ) {
if ( supportsProgress ) {
progressElem.setAttribute( 'value', value );
} else {
// if you don't support progress elem
setText( statusElem, value + ' / ' + imageCount );
}
}
// triggered after each item is loaded
function onProgress( imgLoad, image ) {
// change class if the image is loaded or broken
image.img.parentNode.className = image.isLoaded ? '' : 'is-broken';
// update progress element
loadedImageCount++;
updateProgress( loadedImageCount );
}
// hide status when done
function onAlways() {
statusElem.style.opacity = 0;
}
|
