JQuery preloader - PullRequest
Новая
       1

JQuery preloader

0 голосов
/ 26 марта 2011

Я хотел бы создать такой предварительный загрузчик, как они сделали на этом сайте http://www.solarcentury.co.uk/estimate/?postcode=KT6+4SN, так что создается впечатление, что эти элементы извлекаются из БД, может кто-нибудь указать мне правильное направление, пожалуйста,

Большое спасибо

Ответы [ 2 ]

1 голос
/ 26 марта 2011

Они просто показывают и скрывают анимационные картинки.

Вы можете сделать свой собственный здесь: http://ajaxload.info/

Используете ли вы AJAX для получения ваших данных?

EDIT:

Если вы хотите имитировать загрузку AJAX (что, как ни удивительно, похоже, имеет место), вы можете использовать setTimeout() во время загрузки, чтобы скрыть анимированные GIF-файлы и показать контент, который вы «загружали». 

jQuery(function() {
    setTimeout(revealContent, 1250);
});

function revealContent() {
    jQuery('.loadingGifs').hide();
    jQuery('.content').show();
}

Вы захотите, чтобы ваши анимированные элементы gif имели класс «loadingGifs» (или что угодно, если оно соответствует селектору в JS). Контент, который вы хотите раскрыть, должен также иметь общий класс / селектор, который имеет отображение: ни один не объявлен в его CSS.

0 голосов
/ 08 октября 2012

Вот один из вариантов использования AJAX для загрузки массива активов.Как видите, изображения объявлены в HTML, но им не назначен источник.Таким образом, идея заключается в том, что вы используете цикл, чтобы знать, когда загружаются элементы в массиве, и как только они все будут загружены, вы назначаете их соответствующему тегу HTML.

Вы также можете отобразить ресурс сразу после его загрузки, но это хороший вариант для небольших виджетов на большой странице: 

<html>
<body>

    <div id="container">
        <header></header>
        <div role="main">
            <img id="img1" width="200" height="200"/>
            <img id="img2" width="200" height="200"/>
            <audio controls="controls" id="song"></audio>
            <p id="loading-txt">LOADING...</p>
        </div>
        <footer></footer>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        (function() {

            var vars = {
                //URLS
                assets_url : ["images/img1.jpg", "images/img2.jpg", "audio/song.mp3"],
                //DESTINIES
                destinies : [$("#img1"), $("#img2"), $("#song")],
                //MESSAGE
                loading_txt : $("#loading-txt")
            };

            //Calls assignSrc() once all the assets are loaded
            var loadAssets = function() {

                for(var i = 0; i < vars.assets_url.length; i++) {

                    var _assetsLoaded = 0;

                    $.ajax({
                        url : vars.assets_url[i],
                        success : function() {

                            _assetsLoaded++;
                            vars.loading_txt.text("ASSETS LOADED: " + _assetsLoaded);

                            if(_assetsLoaded === vars.assets_url.length) {
                                assignSrc();
                            }
                        }
                    });
                }
            }

            //Assigns the asset source once the load is complete
            var assignSrc = function() {
                for(var i = 0; i < vars.destinies.length; i++) {
                    vars.destinies[i].attr("src", vars.assets_url[i]);
                }
            }

            loadAssets();

        })();

    </script>
</body>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...