dojo边框布局显示所有内容，闪烁然后正确重绘
Posted
技术标签:
【中文标题】dojo边框布局显示所有内容，闪烁然后正确重绘【英文标题】：dojo borderlayout show all the content , flicker then redraw correctly 【发布时间】：2010-03-05 15:32:57 【问题描述】：我使用 Borderlayout 从 dojo 站点复制了一个示例。但是，当我在浏览器中加载时，会显示所有部分的整个数据。然后几秒钟后内容被引用并且数据正确显示。
这是我复制的代码。感谢您的帮助
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
<style type="text/css">
body, html font-family:helvetica,arial,sans-serif; font-size:90%;
</style>
<style type="text/css">
html, body width: 100%; height: 100%; margin: 0; #borderContainer
width: 100%; height: 100%;
</style>
</head>
<body class="tundra ">
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true"
liveSplitters="true" id="borderContainer">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading"
style="width: 100px;">
Hi
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
Hi, I'm center
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function()
if (window.pub)
window.pub();
);
</script>
【问题讨论】：
【参考方案1】：这看起来有点颠倒：你应该把你的 javascripts 放在 head 部分并首先加载 dojo 库。不过那不是你的问题。
当页面加载时，dojo 会加载您“dojo.require”的所有模块，然后解析包含属性“dojoType”的所有标签并处理它们以进行渲染，这需要时间。
因此，您看到的闪烁是小部件解析前后页面之间的差异。
您应该添加一个预加载器 div 并在页面被解析后将其隐藏（参见 this 示例）。
这就是你的例子的样子：
<html>
<head>
<title>Preloader example</title>
<!– every Dijit component needs a theme –>
<link rel="stylesheet"
href="http://o.aolcdn.com/dojo/1.4/dijit/themes/soria/soria.css">
<style type="text/css">
#preloader,
body, html
width:100%; height:100%; margin:0; padding:0;
#preloader
width:100%; height:100%; margin:0; padding:0;
background:#fff
url(’http://search.nj.com/media/images/loading.gif’)
no-repeat center center;
position:absolute;
z-index:999;
#borderContainer
width:100%; height:100%;
</style>
<!– load Dojo, and all the required modules –>
<script src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript">
var hideLoader = function()
dojo.fadeOut(
node:"preloader",
onEnd: function()
dojo.style("preloader", "display", "none");
).play();
dojo.addOnLoad(function()
// after page load, load more stuff (spinner is already spinning)
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser");
// notice the second onLoad here:
dojo.addOnLoad(function()
dojo.parser.parse();
hideLoader();
);
);
</script>
</head>
<body class="soria">
<div id="preloader"></div>
<div dojoType="dijit.layout.BorderContainer" id="borderContainer" design="sidebar" gutters="true" liveSplitters="true">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">Hi</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">I'm Center</div>
</div>
</body>
</html>
【讨论】：
【参考方案2】：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
if(dojo.isIE)
addEvent(window, 'load', function(event)
dojo.parser.parse();
);
else
dojo.addOnLoad(function()
dojo.addOnLoad(function()
dojo.parser.parse();
);
);
function addEvent( obj, type, fn )
if ( obj.attachEvent )
obj['e'+type+fn] = fn;
obj[type+fn] = function()obj['e'+type+fn]( window.event );
obj.attachEvent( 'on'+type, obj[type+fn] );
else
obj.addEventListener( type, fn, false );
禁用 parseOnLoad 并手动添加事件以解析 ie 的小部件。
【讨论】：
以上是关于dojo边框布局显示所有内容，闪烁然后正确重绘的主要内容，如果未能解决你的问题，请参考以下文章