Dojo“加载”-消息
Posted
技术标签:
【中文标题】Dojo“加载”-消息【英文标题】：Dojo "loading"-message 【发布时间】：2009-01-28 10:37:22 【问题描述】：我是 Dojo 的新手，所以我需要一点帮助。
我的一些链接需要一段时间（当用户点击时，页面开始加载需要几秒钟），我想添加一个“正在加载”-消息。
我可以用“老式方式”来做，但我想学习新的、更简单、更智能的 Dojo 方式。
现在它的具体工作原理并不重要，但我想像这样：
一个矩形出现在浏览器窗口的中间。 （不是文档的中间。）它有一个动画 gif，以及类似“请稍候...”的消息。
所有其他元素都被禁用，可能会“淡出”一点。可能是一个 50% 透明的大白色矩形，它位于“正在加载”消息和文档的其余部分之间。
【问题讨论】：
【参考方案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，具体取决于您在其中放了多少东西）。在慢速连接上，下载仍然需要相当长的时间。也就是说，我们说的是 static 90K --- 同一用户在每个会话中只会下载一次，如果您花时间设置适当的缓存/过期标头，则下载次数甚至更少什么时候提供这些静态文件。
【讨论】：
你误会了一点。它不是等待当前页面加载。下一页开始加载之前需要一段时间，因为 servlet 需要做一些需要一段时间的事情。但 dijit.Dialog 看起来不错。我去看看... 好吧，您可以调整我的解决方案并通过替换 ContentPane 的当前内容来加载链接的全部内容，同时显示加载对话框。但这涉及到在整个站点上实施，在这种情况下，GWT 将是比 dojo 更好的选择。【参考方案2】：Dojo 已经有一个这样的组件：Dojox Busy Button。您可能还对 Sitepen 的以下文章感兴趣：Dojo: Building Blocks of the Web（显示屏蔽页面内容）和Implementing a Web Application Preloading Overlay。
【讨论】：
繁忙的按钮看起来很有趣，可用于其他用途。但为此它不够显眼（如果您在不使用按钮的情况下提交表单，您可能不会注意到它），并且它不会阻止用户在随时会消失的页面上工作。但是感谢您的链接，我稍后会阅读。【参考方案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
【讨论】：
【参考方案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 动画。
【讨论】：
【参考方案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 的回答。
【讨论】：
以上是关于Dojo“加载”-消息的主要内容，如果未能解决你的问题，请参考以下文章