HTML — отображать анимацию во время загрузки JavaScript

Я использую этот JavaScript для предварительной загрузки нескольких изображений на свой сайт.

var images = new Array()
function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image()
        images[i].src = preload.arguments[i]
        }
    }

    preload(
        "img/1.png",
        "img/hover.png",
        "img/image.png",
        "img/work1.png"
    )

Этот код связан в HEAD сайта. Но когда кто-то посещает мой веб-сайт, он ждет несколько секунд, пока загружаются изображения, и в это время он видит пустой (белый) веб-сайт, пока не будут загружены файлы JS. Я хочу сделать так, чтобы когда кто-то посещал мой веб-сайт, он видел «Панель загрузки загрузки» или сообщение с надписью «Вати, пока страница не будет загружена» и т. д. Без пустой индексной страницы, на которой связан JavaScript


javascript html jquery loading progress-bar
person Venan24    schedule 26.08.2015    source источник
comment
Ваш preload() загружает только изображения. Вам нужно написать больше кода, чтобы манипулировать DOM и отображать нужный контент (во время загрузки изображений и после их загрузки).   -  person benjarwar    schedule 27.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

Если точный индикатор выполнения действительно полезен для ваших пользователей, вам, вероятно, лучше просто использовать анимированный gif, который скрывается после завершения ваших функций загрузки. Что-то вроде этого: Загрузка анимации

Поместите гифку поверх index.html file. Что-то типа

<div id="loading-gif"><img src="/path/to/gif"></div>

Затем, когда ваш контент загрузится, просто выполните что-то вроде

document.getElementById("loading-gif").style.display = 'none';

Обратите внимание, что информация о лицензии для приведенного выше изображения находится здесь.

person TheGentleman    schedule 26.08.2015