javascript - 道场 "loading"- 消息

标签 javascript ajax modal-dialog dojo

我是 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/

相关文章:

javascript - 编译后按一定顺序连接 typescript 文件

javascript - 如何使用 Bookshelf 在单个事务中处理和更新集合中的所有模型?

javascript - $(...).ajaxForm 不是函数

javascript - onclick 函数的问题

iphone - 模态视图 Controller 底部有白色条纹

Javascript根据值对键值对对象进行排序

javascript - 通过 javascript 与 Firefox 插件交互

javascript - 在 AJAX 调用中填充外部数组

html - 将滚动条添加到模态窗口

ajax - 如何在不使用链接的情况下在 Drupal 8 中打开模态?