Question

我是Dojo的新手，所以我需要一点帮助。

我的一些链接需要一段时间（当用户点击时，页面开始加载需要几秒钟），我想添加一个“加载”消息。

我可以用“旧时尚方式”来做，但我想学习新的，更简单，更智能的Dojo方式。

它究竟是如何工作的现在并不重要，但我想这样的事情：

在浏览器窗口的中间出现一个矩形。（不是文档的中间部分。）它有一个动画gif，还有一条消息，比如“请等待......”。

所有其他元素都被禁用，可能会“淡出”一点。也许是一个大的白色50％透明矩形，位于“加载”消息和文档的其余部分之间。

Answer 1

您所描述的内容假设在模式dijit.Dialog与加载消息一起出现时已经加载了dojo本身。

现在，通常，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>

该计划中唯一的缺陷是dojo本身：期望你的 shrinksafed 库重量超过90K（可能高达300K，取决于你放入多少东西）。在连接速度较慢的情况下，下载仍需要相当长的时间。也就是说，我们谈的是一个静态 90K ---相同的用户每次会话只会下载一次，如果你花时间设置适当的缓存/过期标题，那就更少了当这些静态文件被提供时。

Answer 2

Dojo已经有一个这样的组件：Dojox Busy Button。您可能还对Sitepen的以下文章感兴趣：Dojo: Building Blocks of the Web（演示阻止页面内容）和Implementing a Web Application Preloading Overlay。

Answer 3

我正在使用 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的ID

Answer 4

我已经用这种方式实现了这样的事情：

首先，在每个页面上，为任何附加了类'slow'的href添加一个事件处理程序：

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

加载函数如下所示：

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

'loading'类的CSS如下所示：

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

其中loading.gif是一个很好的动画GIF。

Answer 5

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();
}

这是一个无法关闭的模态消息框，因此用户无法使用页面上的其他元素。这正是我要求的，所以我会接受pierdeux的回答。

道场“加载” - 消息

5 个答案: