Dojo - "загрузка" - сообщение - PullRequest
Новая
       31

Dojo - "загрузка" - сообщение

6 голосов
/ 28 января 2009

Я новичок в Додзё, поэтому мне нужна небольшая помощь.

Некоторые из моих ссылок занимают некоторое время (когда пользователь щелкает, до загрузки страницы требуется несколько секунд), и я хотел бы добавить сообщение "loading".

Я могу сделать это «старомодным способом», но я хочу изучить новый, более простой и умный способ Додзё.

Точно, как это работает, сейчас не важно, но я представляю что-то вроде этого:

Прямоугольник появляется в середине окон браузера. (Не в середине документа.) У него есть анимированный GIF и сообщение типа «Пожалуйста, подождите ...».

Все остальные элементы отключены, возможно, немного "затухли". Возможно, большой белый прозрачный 50% -ный прямоугольник, который находится между сообщением «loading» и остальной частью документа.

Ответы [ 5 ]

8 голосов
/ 28 января 2009

То, что вы описываете, предполагает, что само dojo уже было загружено к моменту появления модального сообщения dijit.Dialog с сообщением о загрузке.

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

Это означает, что оставшаяся часть вашей страницы (то, что вы называете своими "ссылками") должна быть загружена через ajax (используя, например, dijit.layout.ContentPane). Таким образом, dojo может выполняться до того, как содержимое будет загружено, и ваше «ожидающее» сообщение может появиться раньше.

Это может выглядеть так: 

<html>

<head>
<link rel="stylesheet" href="/dojo/dijit/themes/tundra/tundra.css" type="text/css" media="screen" />
<script type="text/javascript" src="/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
/* make sure that you shrinksafe together your libraries and dojo's for faster loading... */
<script type="text/javascript" src="/dojo/yourOwnDojoCompressedScripts.js"></script>
<script type="text/javascript">
   var dialog;
   dojo.addOnLoad(function(){
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.Dialog");
      dialog = new dijit.Dialog();
      dialog.setContent("<p>This page will be available in a tick!</p>");
      dialog.show();
   });
</script>
</head>

<body class="tundra">
   <div id="delayedContent" 
        dojoType="dijit.layout.ContentPane" 
        href="/myContentUrl"
        onLoad="dialog.hide()">
   </div>
</body>

</html>

Единственный недостаток в этом плане - это само додзё: ожидайте, что ваша термоусадочная библиотека будет весить более 90 КБ (возможно, до 300 КБ, в зависимости от того, сколько вы там положили). При медленном соединении загрузка все равно занимает заметное количество времени. Тем не менее, мы говорим о static 90K - один и тот же пользователь будет загружать его только один раз за сеанс, и даже реже, если вы потратите время на установку соответствующих заголовков cache / expire, когда эти статические файлы обслуживаются.

7 голосов
/ 30 января 2009

Dojo уже имеет один такой компонент: Dojox Busy Button . Вас также могут заинтересовать следующие статьи Sitepen: Dojo: Создание веб-блоков (демонстрирует блокирование содержимого страницы) и Реализация наложения предварительной загрузки веб-приложения .

5 голосов
/ 13 декабря 2011

Я использую dojox.widget.Standby для этой цели: http://dojotoolkit.org/reference-guide/dojox/widget/Standby.html

dojo.require("dojox.widget.Standby");

var standby = new dojox.widget.Standby({
                                 target: "target-id-toStandby",
                                 color: "white",
                                 image: "/images/loading-ajax.gif"
                             });
                             document.body.appendChild(standby.domNode);
                             standby.startup();
                             standby.show();

когда ваш контент готов к использованию ... 

standby.hide();

"target-id-toStandby" - это идентификатор div, который вы хотите "заморозить"

4 голосов
/ 30 января 2009

Я реализовал такую ​​вещь следующим образом:

Сначала на каждой странице добавьте обработчик событий к любому href с присоединенным классом «slow»: 

    dojo.addOnLoad(function() {
        dojo.query('a.slow').onclick(function() {loading(); return true;});
    });

Функция загрузки выглядит следующим образом: 

    function loading() {
        var underlay = new dijit.DialogUnderlay({'class': 'loading'});
        underlay.show();
    }

CSS для класса «loading» выглядит так: 

div.loading {
    background-image: url(/images/loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}

Где loading.gif - хороший анимированный GIF.

2 голосов
/ 01 февраля 2009

Pierdeux помог мне с этим. Это мой код: 

dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");

function displayWait(txtContent) {
    if (!txtContent) {
        txtContent = "Please wait...";
    }
    txtContent = "<img src=\"loading.gif\" alt=\"\" /> " + txtContent;
    var thisdialog = new dijit.Dialog({ title: "", content: txtContent });
    dojo.body().appendChild(thisdialog.domNode);
    //thisdialog.closeButtonNode.style.display='none';
    thisdialog.titleBar.style.display='none';
    thisdialog.startup();
    thisdialog.show();
}

Это модальное окно сообщения, которое нельзя закрыть, поэтому пользователь не может использовать другие элементы на странице. Это именно то, о чем я просил, поэтому я приму ответ Пирдо.

...