Нормальный прелоадер для сайта или костыль?

Пример с процентным заполнением полоски-прелоадера

/**
 * Preloader of site
 * @author      delphinpro <[e-mail]>
 * @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);
    });
})();

Нормальный прелоадер для сайта или костыль?

На отдельно взятой странице, с известным набором картинок, их можно передать списком в js. Js сгенерит скрытые теги, дождется загрузки и удалит их и скроет лоадер.

С неизвестным набором картинок, скрипт может собрать все теги img со страницы, распарсить css (можно не весь, а только заданный набор селекторов), вытащить оттуда линки, добавить их к списку тегов. Далее как и в первом случае - генерим теги, ждем загрузки, удаляем.

Правильно ли делать первый и последний элемент списка по БЭМ?

Да нет. Для БЭМа вполне нормальное назначение класса на ссылку, если именно для нее требуется стилизация.
И так тоже нормально

<li class="top-menu__item top-menu__item_first">
  <a class="top-menu__link top-menu__link_first">Homepage</a>
</li>

Но лично я предпочитаю (в подавляющем большинстве случаев) псевдо-селекторы.

Почему когда compare изменить на что-то другое, то код не работает?

olya_097, посмотрите исходник Intl.Collator()
Эта функция-конструктор возвращает объект, у которого есть такой метод.

Почему vs code добавляет "_" когда я пытают перейти по ссылке импорта scss?

@import 'file.css';
Так лучше не писать. Scss не вставит содержимое css файлов, а оставит css-import.

Почему vs code добавляет "_" когда я пытают перейти по ссылке импорта scss?

расширение пропишите.
@import "./../libs/smart-grid/test1.scss";

особенность редактора наверное.
дело в том, что в sass есть соглашение — именовать подключаемые файлы с нижнего подчеркивания (таким образом они не будут компилироваться в отдельные css файлы)

Как организовать точечное применение стиля на конкретной странице?

oink, c вашей личной точки зрения может и нецелесообразно.

Но что по настоящему косячно (только не подумайте, что хочу вас обидеть) — это нанимать некомпетентного разработчика. Сегодня один костыль, завтра другой, через полгода это УГ станет невозможно поддерживать. Сколько я таких сайтов видел, вы не представляете...

Как организовать точечное применение стиля на конкретной странице?

Сайт на CMS (Prestashop), соответственно, прямого доступа к HTML нет,

Что за ерунду вы пишете?
Откуда тогда там вообще берется код страниц?
Может стоит просто открыть документацию и почитать?

Актуален ли IE11 в 2019м?

Еще есть таблица совместимости для именно для javasript — https://kangax.github.io/compat-table/es6/

Актуален ли IE11 в 2019м?

Неужели кто-то до сих пор не знает о существовании сайта https://caniuse.com/ ???

Заходи и смотри.

Например хочу использовать let

Давно уже можешь использовать без костылей. В IE11 есть только один маленький нюанс — не работает область видимости в циклах for
Вот здесь for (let i = 0;) i не будет объявляться заново на каждой итерации.

Как переписать файл gulpfile.js, написанный для 3 версии gulp, для 4 версии?

в 4 версии галпа изменен синтаксис слегка.
либо откатывайтесь на третью, либо прочитайте доки.
Конкретно у вас таск build нужно переписать с использованием gulp.parallel

Как настроить среду?

misterobot404, у меня он шире, чем на вашей картинке. А кликабельная область полосы еще шире, чем визуальная. Проблем не ощущаю.

Как настроить среду?

misterobot404, Это инспекции. Вы можете их отключить полностью либо выборочно в соответствующем разделе настроек (Editor — Inspection)

Как убрать бэкграунд гамбургера при нажатии в мобильной версии?

Underdoggit, для outline не нужны префиксы.

Нужно сделать свою кнопку play у тега video?

Отдельно кнопка не кастомизируется. Элементы управления вообще не кастомизируются.
Исходя из этого видится одно решение — плеер делать без controls, а контролы верстать отдельно, и оживлять через video api
Т.е. по сути написать собственный плеер — обертку над video.

Как убрать крошки?

Это нужно решать на бэкэнде, а не в css

Существуют ли приложения для Windows 10, которые не поддерживают Windows 7?

Любое приложение из Windows Store =)

В каких единицах получается ответ?

Важное примечание: В UTC +0.
Чтобы получить дату в локальной таймзоне:

var date = (new Date(diffDays)).getDate();

Но это для автора вопроса на будущее. К текущей задаче (получение разницы в днях) отношения не имеет.

Как нарисовать букву F?

Станислав, без разницы. я просто забыл про h и v, с ними короче получается.

Как нарисовать букву F?

Станислав, Увеличьте viewBox - проще будет все же с целыми числами.
Ну и посмотрите мой пример что ли.
Два дня рисовать одну букву - это перебор =)))