https://www.analytikashop.gr/vendor/imagesloaded/sandbox/progress/progress.idyeutzxlt.js

1/* jshint strict: false */
2
3var progressElem, statusElem;
4var supportsProgress;
5var loadedImageCount, imageCount;
6
7var container = document.querySelector('#image-container');
8statusElem = document.querySelector('#status');
9progressElem = document.querySelector('progress');
10
11supportsProgress = progressElem &&
12  // IE does not support progress
13  progressElem.toString().indexOf('Unknown') === -1;
14
15document.querySelector('#add').onclick = function() {
16  // add new images
17  var fragment = getItemsFragment();
18  container.insertBefore( fragment, container.firstChild );
19  // use ImagesLoaded
20  var imgLoad = imagesLoaded( container );
21  imgLoad.on( 'progress', onProgress );
22  imgLoad.on( 'always', onAlways );
23  // reset progress counter
24  imageCount = imgLoad.images.length;
25  resetProgress();
26  updateProgress( 0 );
27};
28
29// reset container
30document.querySelector('#reset').onclick = function() {
31  empty( container );
32};
33
34// ----- set text helper ----- //
35
36var docElem = document.documentElement;
37var textSetter = docElem.textContent !== undefined ? 'textContent' : 'innerText';
38
39function setText( elem, value ) {
40  elem[ textSetter ] = value;
41}
42
43function empty( elem ) {
44  while ( elem.firstChild ) {
45    elem.removeChild( elem.firstChild );
46  }
47}
48
49// -----  ----- //
50
51// return doc fragment with
52function getItemsFragment() {
53  var fragment = document.createDocumentFragment();
54  for ( var i = 0; i < 7; i++ ) {
55    var item = getImageItem();
56    fragment.appendChild( item );
57  }
58  return fragment;
59}
60
61// return an <li> with a <img> in it
62function getImageItem() {
63  var item = document.createElement('li');
64  item.className = 'is-loading';
65  var img = document.createElement('img');
66  var size = Math.random() * 3 + 1;
67  var width = Math.random() * 110 + 100;
68  width = Math.round( width * size );
69  var height = Math.round( 140 * size );
70  var rando = Math.ceil( Math.random() * 1000 );
71  // 10% chance of broken image src
72  // random parameter to prevent cached images
73  img.src = rando < 100 ? '//foo/broken-' + rando + '.jpg' :
74    // use picsum for great random images
75    'https://picsum.photos/' + width + '/' + height + '/' + '?random';
76  item.appendChild( img );
77  return item;
78}
79
80// -----  ----- //
81
82function resetProgress() {
83  statusElem.style.opacity = 1;
84  loadedImageCount = 0;
85  if ( supportsProgress ) {
86    progressElem.setAttribute( 'max', imageCount );
87  }
88}
89
90function updateProgress( value ) {
91  if ( supportsProgress ) {
92    progressElem.setAttribute( 'value', value );
93  } else {
94    // if you don't support progress elem
95    setText( statusElem, value + ' / ' + imageCount );
96  }
97}
98
99// triggered after each item is loaded
100function onProgress( imgLoad, image ) {
101  // change class if the image is loaded or broken
102  image.img.parentNode.className = image.isLoaded ? '' : 'is-broken';
103  // update progress element
104  loadedImageCount++;
105  updateProgress( loadedImageCount );
106}
107
108// hide status when done
109function onAlways() {
110  statusElem.style.opacity = 0;
111}