6

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

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

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

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

一个矩形出现在浏览器窗口的中间。（不是文档的中间。）它有一个动画 gif 和一个类似“请稍候......”的消息。

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

4

5 回答 5

8

您所描述的假设在模式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 本身：预计您的收缩安全库的重量会超过 90K（可能高达 300K，具体取决于您放了多少东西）。在慢速连接上，下载仍然需要相当长的时间。也就是说，我们说的是静态90K --- 同一用户在每个会话中只会下载一次，如果您在提供这些静态文件时花时间设置适当的缓存/过期标头，则甚至更少。

于 2009-01-28T17:55:39.153 回答
7

Dojo 已经有一个这样的组件：Dojox Busy Button。您可能还对 Sitepen 的以下文章感兴趣：Dojo：Web 的构建块（演示阻止页面内容）和实现 Web 应用程序预加载覆盖。

于 2009-01-29T23:03:46.280 回答
5

我为此目的 使用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

于 2011-12-13T16:37:54.133 回答
4

我以这种方式实现了这样的事情：

首先，在每个页面上，将事件处理程序添加到任何附加了“慢”类的 href：

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

加载函数如下所示：

    函数加载（）{
        var underlay = new dijit.DialogUnderlay({'class': 'loading'});
        underlay.show();
    }

“加载”类的 CSS 如下所示：

div.loading {
    背景图片：网址（/images/loading.gif）；
    背景重复：不重复；
    背景位置：中心；
}

哪里loading.gif有漂亮的 GIF 动画。

于 2009-01-30T06:40:28.557 回答
2

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 的回答。

于 2009-02-01T16:56:02.057 回答