在初始化覆蓋層之前加載所有內容

Question

嘿:)我有一個保留內聯內容並通過JavaScript生成內容的fancybox。當然，內聯內容的加載速度要快很多，JavaScript需要一段時間。我真的可以在後臺加載fancybox並將其隱藏起來，然後在加載完所有javascript後顯示它？基本上預加載的所有內容，然後打開它..沒有真正破壞用戶體驗..

我的設置是這樣的：

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

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

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

</div 

而且我的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

只是包裝你的代碼它在一些函數中打開fancybox，而不是在javascript生成你的「東西」之後調用它。

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