Как создать анимацию загрузки активов на веб-странице

Я хочу создать какую-то анимацию или предварительный загрузчик, пока загружается моя веб-страница.Как создать анимацию загрузки активов на веб-странице

На моей веб-странице много внешних активов (cdn, css, js, fonts, images), я хочу отобразить имя актива, который в данный момент загружается браузером, а также индикатор выполнения, показывающий, сколько общее количество активов, присутствующих на странице, загружено.

Использование кода ниже не поможет, поскольку событие будет запущено только после полной загрузки страницы.

$(document).on("pageload",function(){ 
    //animation stops 
});

источник

2016-03-30 vikas kv

показ/скрытие анимации возможен, но не обязательно покажите загруженный ресурс% age. –

http://stackoverflow.com/questions/4999703/preload-with-percentage-javascript-jquery –

Еще одна ссылка http://greensock.com/forums/topic/10115-get-percent-of-images-loaded -on-page-for-tweening-preloader/ –

-2

Вы можете использовать иконки Font Awesome.

Проверьте их spinning icons.

Это означает, что вы можете остановить поворот значка, удалив класс фа-спина из DOM.

например:
HTML

<i id="loadingIcon" class="fa fa-spinner fa-spin"></i>

$(document).ready(function() { 
    $('#loadingIcon').removeClass('fa-spin'); 
});

Кроме того, для отображения активов в процессе загрузки, вы можете использовать атрибут OnLoad в вашем HTML.

<script src="someSource.js" onload="myCallback()">

Я надеюсь, что это помогает,
Rhys

источник

2016-03-30 08:04:05

Он хочет: «Я хочу отобразить имя актива, который браузер загружает в настоящее время, а также индикатор выполнения, показывающий, сколько из общего количества оставшихся активов на странице загружено . – Jer

@Rhys Bradbury точно так же, как C0dekid.php говорит, я хочу показать, какие активы загружаются. –

Мой ответ был обновлен. Пожалуйста, будьте честными и не поддавайтесь голосованию, так как мой ответ отвечает на вопрос. –

Наконец-то я понял, один способ, который почти дает решение проблемы.
Напишите атрибут onload внутри загружаемых активов и вызовите метод javascript. Внутри javascript-метода мы можем отображать активы, которые в настоящее время загружаются (с анимацией).
Ниже я загрузил javascript из ссылки CDN, и пока он загружается, он может быть напечатан на странице вместе с анимацией.

<body> 
    <div id='myDIV' class="loader"> </div> 
    <div id='message'> 
    <ul id="asset"> 

    </ul> 
    <script onload="myFunction('jquery loaded...')" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script onload="myFunction('angular js loaded...')"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script onload="myFunction('bootstrap js loaded')"type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</body>

А функция JavaScript может быть

function myFunction(ele) { 
    var node = document.createElement("LI"); 
    var textnode = document.createTextNode(ele); 
    node.appendChild(textnode); 
    document.getElementById("asset").appendChild(node); 
}

Точно так же мы можем напечатать то, что загружается при загрузке изображений, CSS файлы, шрифты и т.д.

источник

2016-03-30 12:53:06

Пожалуйста, дайте мне знать, если есть какие-то лучшие способы сделать это. Спасибо. –

Как создать анимацию загрузки активов на веб-странице

ответ

Смежные вопросы