可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm new to Dojo, so I need a little help.

Some of my links takes a while (when the user clicks, it takes several seconds before the page starts loading), and I'd like to add a "loading"-message.

I can do it the "old fashion way", but I want to learn the new, easier, smarter Dojo-way.

Exactly how it works is not important right now, but I imagine something like this:

A rectangle appears in the middle of the browser-windows. (Not the middle of the document.) It has an animated gif, and a message like "Please wait...".

All other elements are disabled, maybe "faded out" a bit. Maybe a big white 50% transparent rectangle, which sits between the "loading"-message and the rest of the document.

回答1:

What you are describing assumes that dojo itself has already been loaded by the time that the modal dijit.Dialog appears with the loading message.

Now, normally, dojo starts executing once your page is fully loaded, and you would normally put your dojo code inside an anonymous function passed as parameter of dojo.addOnLoad().

That entails that the remaining part of your page (what you call your "links") will have to be loaded through ajax (using, for instance, dijit.layout.ContentPane). That way, dojo can execute before the content is downloaded, and your "waiting" message can appear earlier.

It might look like this:

<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>

The only flaw in that plan is dojo itself: expect your shrinksafed library to weigh over 90K (possibly up to 300K, depending on how much stuff you put in there). On a slow connection, that still takes a noticeable amount of time to download. That said, we're talking of a static 90K --- the same user will download it only once per session, and even less often than that if you take the time to set appropriate cache/expire headers when those static files are served.

回答2:

Dojo has one such a component already: Dojox Busy Button. You might be also interested in the following articles by Sitepen: Dojo: Building Blocks of the Web (demonstrates blocking the page content) and Implementing a Web Application Preloading Overlay.

回答3:

i am using dojox.widget.Standby for this purpose: 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();

when your content is ready use...

standby.hide();

"target-id-toStandby" is the id of the div you want to "freeze"

回答4:

I have implemented such a thing in this way:

First, on each page, add an event handler to any href with class 'slow' attached:

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

The loading function looks like this:

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

The CSS for the 'loading' class looks like this:

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

Where loading.gif is a nice animated GIF.

回答5:

pierdeux got me on track with this one. This is my code so far:

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

This is a modal message-box that cannot be closed, so the user cannot use other elements on the page. This is exactly what I asked for, so I'll accept pierdeux's answer.