dojo borderlayout Afficher tout le contenu, scintiller puis redessiner correctement

J'ai copié un exemple du site dojo en utilisant Borderlayout. Cependant, lorsque je charge dans le navigateur, toutes les données sont affichées pour toute la section. Puis, après quelques secondes, le contenu est référencé et les données sont affichées correctement.dojo borderlayout Afficher tout le contenu, scintiller puis redessiner correctement

Voici le code que j'ai copié. Merci pour votre aide

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

Source

2010-03-05 Anonymous

Cela ressemble un peu à l'envers: vous devez mettre votre javascripts dans la section de la tête et charger les bibliothèques du dojo en premier lieu. Ce n'est pas votre problème cependant. Que se passe-t-il lorsque la page se charge, dojo charge tous les modules que vous "dojo.require", puis analyse tous vos tags contenant l'attribut "dojoType" et les traite pour le rendu, et cela prend du temps. Donc le scintillement que vous voyez est la différence entre la page avant et après que les widgets sont analysés.

Vous devez ajouter un div preloader et le masquer une fois la page analysée (voir l'exemple this).

C'est ce qu'il ressemblerait à votre exemple:

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

Source

2010-03-10 15:37:44 Philippe

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

désactiver parseOnLoad et ajouter manuellement événement pour analyser des widgets pour ie.

Source

2010-04-09 16:08:22 coolnalu

dojo borderlayout Afficher tout le contenu, scintiller puis redessiner correctement

Répondre

Questions connexes