道场"加载" - 消息

我是Dojo的新手,所以我需要一些帮助.

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

我可以用"旧时尚方式"来做,但我想学习新的,更简单,更智能的Dojo方式.

究竟它是如何工作的现在并不重要,但我想这样的事情:

浏览器窗口中间出现一个矩形.(不是文档的中间部分.)它有一个GIF动画,以及"请等待......"之类的消息.

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

您所描述的内容假定在模式dijit.Dialog与加载消息一起出现时已经加载了dojo本身.

现在,通常,dojo在页面完全加载后开始执行,并且您通常会将dojo代码放在作为参数传递的匿名函数中dojo.addOnLoad().

这需要你的页面的剩余部分(你称之为"链接")必须通过ajax加载(例如,使用dijit.layout.ContentPane).这样,dojo可以在下载内容之前执行,并且您的"等待"消息可以更早出现.

它可能看起来像这样:

/* make sure that you shrinksafe together your libraries and dojo's for faster loading... */





   

   

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

Dojo已经有一个这样的组件:Dojox Busy Button.您可能还对Sitepen的以下文章感兴趣:Dojo:构建Web块(演示阻止页面内容)和实现Web应用程序预加载叠加.

我为此目的使用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