我是 Dojo 的新手,所以我需要一些帮助。
我的一些链接需要一段时间(当用户点击时,页面开始加载需要几秒钟),我想添加一个“正在加载”消息。
我可以用“老式方式”来做,但我想学习新的、更简单、更智能的 Dojo 方式。
它究竟是如何工作的现在并不重要,但我想是这样的:
一个矩形出现在浏览器窗口的中间。 (不是文档的中间部分。)它有一个动画 gif 和一条消息,如“请稍候...”。
所有其他元素都被禁用,可能会“淡出”一点。可能是一个 50% 透明的白色大矩形,位于“正在加载”消息和文档的其余部分之间。
最佳答案
您所描述的假设是在模态 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 --- 同一用户在每个 session 中只会下载一次,如果您花时间设置适当的缓存/过期 header ,则下载次数甚至会更少当提供这些静态文件时。
关于javascript - 道场 "loading"- 消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/487174/