jQuery мобильный загрузчик шоу для пользовательского процесса загрузки?

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

$(document).on('pageinit', function(){
    $('.ui-content').hide();
    var imgs = $(".ui-content img").not(function() { return this.complete; });
    var count = imgs.length;
    if (count) {
        imgs.load(function() {
            count--;
            if (!count) {
                $(".ui-content").show()
            }
        });
    } else {
        $(".ui-content").show();
    }
});

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

Как мне либо удалить загрузчик, либо сохранить его до тех пор, пока он не понадобится?

Источник

3 ответа

Решение

jQuery Мобильный кастомный загрузчик

Решение:

Работающий jsFiddle: http://jsfiddle.net/Gajotres/vdgB5/

Mobileinit событие должно быть инициализировано до инициализации jQuery Mobile и после jQuery. Также некоторые дополнительные изменения в CSS должны быть сделаны, чтобы это работало.

Прежде всего, нам нужно переопределить дефолт ui-loader-default класс, потому что его непрозрачность низка, а конечный счетчик трудно увидеть. Измените значение непрозрачности, как вы хотите.

.ui-loader-default {
    opacity: 1 !important;      
}

И это наш спиннер.

.custom-spinner {
    width: 37px !important;
    height: 37px !important;
    background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
    display: block;
}

Вот рабочий пример:

Пример кода

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <style>

            .ui-loader-default {
                opacity: 1 !important;      
            }

            .custom-spinner {
                width: 37px !important;
                height: 37px !important;
                background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
                opacity: 1 !important;
                display: block;
            }
        </style>
        <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
        <script>
            $( document ).bind( 'mobileinit', function(){
                $.mobile.loader.prototype.options.text = "loading";
                $.mobile.loader.prototype.options.textVisible = false;
                $.mobile.loader.prototype.options.theme = "a";
                $.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
            }); 
        </script>       
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
        <script>
            $(document).on('pageshow', '#index', function(){        
                $.mobile.loading( 'show');          
            }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">

            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

Программное исполнение мобильного загрузчика jQuery ajax

Некоторые браузеры, в том числе браузер Webkit, например, Chrome, имеют программное исполнение jQuery мобильного загрузчика ajax. Они могут быть выполнены вручную с помощью serinterval, например так:

$(document).on('pagebeforecreate', '#index', function(){     
    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    
});

$(document).on('pageshow', '#index', function(){  
    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },1);      
});
Источник

Не уверен на 100%, что вы пытаетесь сделать. В документации есть несколько вещей, которые вы можете сделать с загрузчиком:

http://api.jquerymobile.com/page-loading

Как говорили некоторые другие, вы можете заставить загрузчик появляться / исчезать, вызывая его вручную.

$.mobile.loading("show");

$.mobile.loading("hide");
Источник

Техника, которую я использовал при начальной загрузке, состоит в том, чтобы первый div data-role="page" использовался в качестве экрана загрузки. После начальной загрузки я программно перехожу на домашнюю страницу, используя changePage:

$.mobile.changePage( "#home" , { reverse: false, changeHash: false } );

Вот скрипка
http://jsfiddle.net/puleos/Esf7H/

Источник
Другие вопросы по тегам