грузка изображений замораживание с помощью JavaScript Object Model и JQuery Projec

Question

03Cp> У меня есть код, используя модель объекта JavaScript, чтобы получить элементы для нескольких раскрывающихся коробок в форме. Я также слышал, что использование обещаний было способ пойти на ускорение вещей и создала 2 функции обертки. Первый использует модель объекта, чтобы получить элементы из списка, и это обернуто в обещании с jQuery (. Когда). Второй заполняет раскрывающиеся коробки (.then). Есть несколько звонков, которые сделаны с использованием архитектуры. Когда и. Затем архитектуру. Эти работы отлично, и все выпадающие раскрываются. Вопрос в том, что независимо от того, какой метод я пытаюсь, я не могу сообщить пользователю анимацией, что код действительно работает. Функция AddwaitsCreenwithnocloseSnoclose работает нормально, но изображение замерзает и выглядит непрофессионально. Часы исследования привели меня, чтобы попробовать много вариантов, но ни одна из них не работает так, как было показано, что длинные вызовы по умолчанию замораживают UI. Я получаю это, но это просто странно, что вы не можете позволить пользователю знать, что он работает. Моя форма накапливается так быстро, что из коробки загрузчика никогда не видим, потому что моя форма загружается через модель объекта. Просто удивляюсь, если кто-то создал решение или имеет представление о том, что может работать. Я не уверен, что я могу опубликовать код еще, но если это необходимо, я могу сделать его доступным.u003C/

03Cp> [Код был удален из-за проблем с клиентами ...]u003C/

03Cp> Это хорошие вещи и для того, что он делает быстро, но все же занимает около 5 секунд до 8 секунд для загрузки, и пользователи не знают, что это делает что-то, когда изображение замерзнет. Моя лучшая попытка намного использует SetInterval, чтобы нарисовать цветную div по всей странице, но это тоже, конечно, зависает из-за более длительного кода ...u003C/

03Cp> Обновление: как FYI, этот код на странице, который открывается в SP.UI.ModalDialog. Это пользовательская страница, в которой форма написана как файл HTML, который включает в себя файл JavaScript в теге скрипта. Этот HTML-файл является источником веб-части редактора контента на странице, которая открывается в диалоговом окне. Диалог открывается очень быстро, но данные займут некоторое время ...u003C/

Answer 1

03Cp> Я не уверен, что вы имеете в виду в заморозке, но я не вижу, где вы звоните или закрываете «Работу». Я сделал простой пример с фиктивным кодом, может быть, это поможет вам. Потому что я никогда не видел, что асинхронные звонки заблокировали пользовательский интерфейс и т. Д., Чтобы вы могли попробовать этот подход:u003C/

SP.UI.ModalDialog.showWaitScreenWithNoClose("title", "message", 400, 400);

var dummyExecuteQueryAsync = function(func) {
    func();
}

var AMO = window.AMO || {};
AMO.csom = AMO.csom || {};
AMO.upload = AMO.upload || {};

AMO.csom.GetLookupData = function () {

    var getvalues = function () {
        var deferred = $.Deferred();
        setTimeout(function() {
            dummyExecuteQueryAsync(Function.createDelegate(this, function () { deferred.resolve( "Done: " ); }));   
          },  500 + Math.random() * 3000  );
        return deferred.promise();
    };

    return {
        getvalues: getvalues
    }

}();


AMO.csom.FillDropdowns = function (msg, no) {
    console.log(msg + no);
}


function GetLookupValues() {
    var defferedArr = [];
    defferedArr.push( $.when(AMO.csom.GetLookupData.getvalues())
        .then( 
            function (items) { AMO.csom.FillDropdowns(items,1); } 
        )
    );

    defferedArr.push(  $.when(AMO.csom.GetLookupData.getvalues())
        .then( 
            function (items) { AMO.csom.FillDropdowns(items,2); } 
        )
    );

    defferedArr.push(  $.when(AMO.csom.GetLookupData.getvalues())
        .then( 
            function (items) { AMO.csom.FillDropdowns(items,3); } 
        )
    );

    defferedArr.push(  $.when(AMO.csom.GetLookupData.getvalues())
        .then( 
            function (items) { AMO.csom.FillDropdowns(items,4); } 
        )
    );


    return defferedArr;
}


var def = GetLookupValues();
$.when.apply(null, def).done(function() {
        console.log("All done");
        SP.UI.ModalDialog.commonModalDialogClose();
    });

Answer 2

03Cp> Мы использовали 03Ca href="http://fgnass.github.io/spin.js/" rel="nofollow">Spin.jsu003C/ в нескольких таких сценариях.u003C/

03Cp> u003Cstrong>использованиеu003C/strong>u003C/

03Cp> Определите <div> в HTML Markupu003C/

<div id="userTableSpinner"></div>

03Cp> Затем в JavaScript Code найдите SPINNER DIV и запускайте Spinner и, наконец, остановите его после выполнения всей обработки:u003C/

var userTableSpinner;
function someProcessStartsHere() {
if (userTableSpinner == null) {
    userTableSpinner = new Spinner().spin(document.getElementById('userTableSpinner'));
    }
    else {
        userTableSpinner.spin(document.getElementById('userTableSpinner'));
    }


    // JS Code

    //Finally stop processing
    if (userTableSpinner != null) {
        userTableSpinner.stop();
    }
}