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

Question

[Артур Кранц]

Чтобы снять прелоадер когда загружены все картинки, нужен ивент который показывает что эти картинки загрузились

Ивент может показаться только когда мы используем тег

однако мы не можем использовать , так как нам надо менять разрешение картинок при разных разрешениях экрана, поэтому мы используем свойство css background для класса и вешаем этот класс на элемент (то есть картинку вешаем таким образом)

при использовании свойства background отследить ивент когда все картинки загрузились нельзя, поэтому мы и не можем реализовать скрытие прелоадера, когда все картинки загрузились

решение: сделать таймер с задержкой (примерно 3 сек) после того как контент сайта загрузился, чтобы успели подгрузиться картинки

Это решение нам предлагают наши верстальщики - вставить огромный костыль, вместо правильно работающего прелоадера. Уважаемые знатоки, неужели нет способа узнать ТОЧНО, когда пользователь загрузил все картинки сайта?

Comments

[Сергей delphinpro]

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

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

[Сергей delphinpro]

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

/**
 * 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);
    });
})();

Answer 1

[Dies Irae]

Новая веха в костылестроении.
В гугле куча способов:
1) Создание скрытого тега img с src, который уже можн...
2) Метод ImagesLoaded
3) Image.onload()