代码之家 › 专栏 › 技术社区 › myplacedk

Dojo“加载”消息

pleasewait modal-dialog dojo ajax javascript

myplacedk · 技术社区 · 17 年前

我是Dojo的新手,所以我需要一点帮助。

我的一些链接需要一段时间(当用户点击时,页面开始加载需要几秒钟),我想添加一条“加载”消息。

我可以用“老式的方式”来做,但我想学习新的、更简单、更智能的Dojo方式。

它到底是如何工作的现在并不重要,但我想象一下是这样的:

浏览器窗口的中间会出现一个矩形。(不是文档的中间。)它有一个动画gif,还有一条类似“请稍候…”的消息。

所有其他元素都被禁用,可能有点“淡出”。可能是一个50%透明的白色大矩形,位于“加载”消息和文档的其余部分之间。

5 回复 | 直到 5 年前

pierdeux 17 年前

您所描述的假设是,在模态加载之前,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>

该计划的唯一缺陷是道场本身:期待你的防缩图书馆的重量超过90K(可能高达300K,取决于你放了多少东西)。在连接速度较慢的情况下,下载仍然需要相当长的时间。也就是说,我们谈论的是 静态的 90K——同一用户每次会话只会下载一次,如果你在提供这些静态文件时花时间设置适当的缓存/过期标头,下载频率甚至会更低。

Maine 17 年前

Dojo已经有一个这样的组件: Dojox Busy Button 。您可能还会对Sitepen的以下文章感兴趣: Dojo: Building Blocks of the Web (演示如何阻止页面内容)以及 Implementing a Web Application Preloading Overlay .

Otto 13 年前

我正在使用 dojox.widget。待机 为此目的: 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

Chris KL 17 年前

我以这种方式实现了这样一件事:

首先,在每个页面上,向任何附加了类“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动画。

myplacedk 17 年前

皮尔斯让我在这件事上走上了正轨。这是我到目前为止的代码:

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();
}

这是一个无法关闭的模态消息框,因此用户无法使用页面上的其他元素。这正是我所要求的,所以我接受皮尔斯的回答。