Dojo“正在加载”-消息

r8xiu3jd 于 2022-12-08 发布在 Dojo

关注(0)|答案(5)|浏览(231)

我是新来的，所以我需要一点帮助。
我的一些链接需要一段时间（当用户点击时，页面开始加载前需要几秒钟），我想添加一个“正在加载”消息。
我可以做它的“旧时尚的方式”，但我想学习新的，更容易，更聪明的 dojo 方式。
它究竟是如何工作的现在并不重要，但我想象这样的事情：
一个矩形出现在浏览器窗口的中间。（不是文档的中间。）它有一个动画gif，和一个类似“请等待..."的消息。
所有其他元素都被禁用，可能会“淡出”一点。可能是一个50%透明的白色大矩形，位于“正在加载”消息和文档的其余部分之间。

dojo

来源：https://stackoverflow.com/questions/487174/dojo-loading-message

5条答案

按热度按时间

vybvopom1#

您所描述的内容假设dojo本身在模式dijit.Dialog出现时已经加载，并显示加载消息。
现在，通常情况下，一旦页面完全加载，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本身：我希望你的压缩库重量超过90 K（可能高达300 K，这取决于你放了多少东西）。在一个慢速连接上，这仍然需要相当长的时间来下载。也就是说，我们谈论的是一个 * 静态 * 90 K--同一个用户在一个会话中只下载一次，如果您在提供这些静态文件时花时间设置适当的cache/expire头，那么这种情况的发生频率甚至会更低。

赞(0）回复(0）举报 2022-12-08

t98cgbkg2#

Dojo已经有一个这样的组件：Dojox Busy Button。您可能对Sitepen的以下文章感兴趣：Dojo: Building Blocks of the Web（演示阻止页面内容）和Implementing a Web Application Preloading Overlay。

赞(0）回复(0）举报 2022-12-08

bwleehnv3#

我正在使用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

赞(0）回复(0）举报 2022-12-08

zpgglvta4#

我曾这样实现过这样一件事：
首先，在每个页面上，将事件处理程序添加到附加了类'slow'的任何href：

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

加载函数如下所示：

function loading() {
        var underlay = new dijit.DialogUnderlay({'class': 'loading'});
        underlay.show();
    }

“loading”类的CSS如下所示：

div.loading {
    background-image: url(/images/loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}

其中loading.gif是一个不错的动画GIF。

赞(0）回复(0）举报 2022-12-08

unguejic5#

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

赞(0）回复(0）举报 2022-12-08

我来回答

Dojo“正在加载”-消息

5条答案

相关问题

热门标签

最新问答