ansaurus

Question

dojo borderlayout show all the content , flicker then redraw correctly

Answer 1

A:

This looks a bit upside down : you should put your javascripts in the head section and load the dojo libraries in first place. That's not your problem though.

What happens is that when the page loads, dojo loads all the modules that you "dojo.require", then parses all your tags containing the attribute "dojoType" and processes them for rendering, and this takes time.

So the flickering that you're seeing is the difference between the page before and after the widgets are parsed.

You should add a preloader div and hide it once the page is parsed (see this example).

This is what it would look like for your example :

<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"&gt;
        <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"&gt;&lt;/script&gt;
        <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>

Philippe 2010-03-10 15:37:44

Answer 2

A:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"&gt;&lt;/script&gt;

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

disable parseOnLoad and manually add event to parse widgets for ie.

coolnalu 2010-04-09 16:08:22

Answer 3

A:

coolnalu's script to manually load widgets for IE worked great!

nightynate 2010-08-11 19:56:34

ansaurus

tags:

views:

answers:

dojo borderlayout show all the content , flicker then redraw correctly

related questions