/**
* Preloader of site
* @author delphinpro <delphinpro@gmail.com>
* @license Licensed under the MIT license
*/
'use strict';
(function () {
var PRELOADER_DEV = false;
function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function onLoadedSite() {
if (!PRELOADER_DEV) {
document.body.classList.remove('is-loading');
// Inject yandex.map api
bYandexMapApiLoaded = true;
var script = document.createElement('script');
script.src = 'https://api-maps.yandex.ru/2.1/?lang=ru_RU';
document.body.appendChild(script);
}
}
function createTempImage(body, url) {
var img = document.createElement('img');
img.className = "temp-image";
img.src = url;
body.appendChild(img);
return img;
}
function removeTempImage(img, totalImages, percentPerImage, beginWidth, elapsedWidth) {
document.body.removeChild(img);
if (totalImages == 0) {
progressBar.classList.remove('site-preloader__progress-bar--with-animation');
progressBar.classList.add('site-preloader__progress-bar--with-last-animation');
}
var percentAdding = 100 - totalImages * percentPerImage;
progressBar.style.width = (beginWidth + Math.round((elapsedWidth * percentAdding) / 100)) + 'px';
}
function getAllImages() {
var images = [];
// from document
[].forEach.call(document.querySelectorAll('img'), function (img) {
images.push(img.src);
});
// from styles
var elements = document.querySelectorAll('div');
[].forEach.call(elements, function(im){
var bgi = getComputedStyle(im).backgroundImage;
if (bgi != 'none' && bgi != '') {
bgi = bgi.replace(/^url\((")?/, '');
bgi = bgi.replace(/(")?\)$/, '');
images.push(bgi);
}
});
return images;
}
var styles = document.createElement('style');
styles.innerHTML = '' +
'.site-preloader{display:none;position:fixed;left:0;top:0;right:0;bottom:0;background:#fff;z-index:4294967294;}' +
'.site-preloader__progress{background:#E6E6E6;}' +
'.site-preloader__progress-bar{background:#40A1E6;display:block;width:0;height:10px;}' +
'.site-preloader__progress-bar--with-animation{-webkit-transition:all 3s cubic-bezier(.25,.46,.45,.94);transition:all 3s cubic-bezier(.25,.46,.45,.94);}' +
'.site-preloader__progress-bar--with-last-animation{-webkit-transition:all 0.3s cubic-bezier(.25,.46,.45,.94);transition:all 0.3s cubic-bezier(.25,.46,.45,.94);}' +
'.site-preloader img{opacity:0;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;}' +
'.site-preloader .site-preloader__img--loaded{opacity:1;}' +
'.is-loading{overflow:hidden;}' +
'.is-loading .site-preloader{display:block;}' +
'.hide-while-loading{-webkit-transition:opacity 1s ease;transition:opacity 1s ease;opacity:1;}' +
'.is-loading .hide-while-loading{opacity:0;}';
document.head.appendChild(styles);
var preloader = document.querySelector('#site-preloader');
var progress = preloader.querySelector('.site-preloader__progress');
var progressBar = progress.querySelector('.site-preloader__progress-bar');
var barWidth = 0;
var progressWidth = progress.clientWidth;
var timer = setInterval(function () {
barWidth++;
progressBar.style.width = barWidth + 'px';
}, 100);
var splashImages = preloader.querySelectorAll('img');
[].forEach.call(splashImages, function (img) {
img.addEventListener('load', function () {
this.classList.add('site-preloader__img--loaded');
});
});
ready(function () {
console.log('READY');
clearInterval(timer);
progressBar.classList.add('site-preloader__progress-bar--with-animation');
var images = getAllImages();
var totalImages = images.length;
var beginWidth = progressBar.clientWidth;
var elapsedWidth = progressWidth - beginWidth;
var percentPerImage = Math.round(100 / totalImages);
var i, len = images.length;
for (i = 0; i < len; i++) {
var url = images[i];
createTempImage(document.body, url).addEventListener('load', function () {
totalImages--;
removeTempImage(this, totalImages, percentPerImage, beginWidth, elapsedWidth);
});
}
});
window.addEventListener('load', function () {
console.log('LOAD');
setTimeout(onLoadedSite, 300);
});
})();<li class="top-menu__item top-menu__item_first">
<a class="top-menu__link top-menu__link_first">Homepage</a>
</li>Например хочу использовать let
А речь почему то о галпе...