オーバーレイを初期化する前にすべてのコンテンツを読み込み

Question

Hey :) JavaScriptを使用してインラインコンテンツを保持し、コンテンツを生成したfancyboxがあります。もちろん、インラインのコンテンツはかなり高速に読み込まれ、JavaScriptはしばらく時間がかかります。実際にファンシーボックスをバックグラウンドでロードして隠すだけで、すべてのjavascriptがロードされた後に表示することはできますか？ちょうどあなたのコードをラップ

<script type="text/javascript"> 
    $(function() { 
      $.fancybox.open([ 
       { 
        type: 'inline', 
        href : '.popupContent',    
       } 
      ], { 
       closeClick: false, 
       fitToView: true, 
       autoResize: true, 
       closeBtn: false, 
       hideOnContentClick: true, 
       hideOnOverlayClick: false, 
       autoSize: true, 
       openSpeed: 150, 
       modal: true, 
       padding : 0 
      }); 
     }); 

    </script> 

Answer 1

：

<div class="popupContent" style="display: none;"> 

    <div id="something_text"> bla bla bla </div> 

    <div id="something_js_generated"> 
     <script> </script> 
    </div> 

</div 

そして、私のjavascript：基本的に私のセットアップは、このようなものです

...そして、本当にユーザーエクスペリエンスを破壊することなく...それを開く、すべてのコンテンツをプリロードそれはあなたの "何か"を生成した後、javascriptから呼び出すよりも、いくつかの機能でfancyboxを開きます。

<script type="text/javascript"> 
    function openPopup() { 
      $.fancybox.open([ 
       { 
        type: 'inline', 
        href : '.popupContent',    
       } 
      ], { 
       closeClick: false, 
       fitToView: true, 
       autoResize: true, 
       closeBtn: false, 
       hideOnContentClick: true, 
       hideOnOverlayClick: false, 
       autoSize: true, 
       openSpeed: 150, 
       modal: true, 
       padding : 0 
      }); 
     }); 

</script> 

<div id="something_js_generated"> 
     <script> 
     //generate something 
     openPopup(); 
     </script> 
</div> 

また、生成されたコードによって、終了時にイベントが発生することがあります。オープニング機能をイベントにバインドすることができます。このように：

<script type="text/javascript"> 
     $(document).on("myCustomEventsPrefix:OpenPopup",function(){ 
       $.fancybox.open(
       //.... 
       ); 
     }); 

    </script> 

    <div id="something_js_generated"> 
      <script> 
      //generate something 
      $(document).trigger("myCustomEventsPrefix:OpenPopup"); 
      </script> 
    </div>