我是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本身:希望您的收缩安全库的重量超过90K(可能多达300K,这取决于您放入的库的数量)。在连接速度较慢的情况下,下载仍然需要花费大量时间。就是说,我们说的是静态的90K-同一用户在每个 session 中只会下载一次,而如果您花时间在提供这些静态文件时花时间设置适当的缓存/过期 header ,则下载频率会更低。