dojo边框布局显示所有内容，闪烁然后正确重绘答案

【问题标题】：dojo borderlayout show all the content , flicker then redraw correctlydojo边框布局显示所有内容，闪烁然后正确重绘
【发布时间】：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>

【问题讨论】：

标签： dojo dijit.layout

【解决方案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 的小部件。

【讨论】：