dojo borderlayout 모든 내용을 표시하고, 깜박 거리며 올바르게 다시 그립니다.

Borderlayout을 사용하여 dojo 사이트에서 예제를 복사했습니다. 그러나 브라우저에서로드하면 모든 섹션에 대한 전체 데이터가 표시됩니다. 몇 초 후 내용이 표시되고 데이터가 올바르게 표시됩니다.dojo borderlayout 모든 내용을 표시하고, 깜박 거리며 올바르게 다시 그립니다.

여기는 복사 한 코드입니다. 당신은 헤드 섹션에서 자바 스크립트를 넣어 첫번째 장소에있는 도장 라이브러리를로드해야합니다 : 당신의 도움이

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

출처

2010-03-05 Anonymous

이 거꾸로 조금 보이는 주셔서 감사합니다. 그것은 당신의 문제가 아니에요.

페이지가로드 될 때 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>

출처

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

비활성화 parseOnLoad 수동 IE 용 위젯을 구문 분석 이벤트를 추가 :

이것은 당신의 예를 들어 같을 것이다 것입니다.

출처

2010-04-09 16:08:22 coolnalu

dojo borderlayout 모든 내용을 표시하고, 깜박 거리며 올바르게 다시 그립니다.

답변

관련 문제