在初始化覆盖层之前加载所有内容

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>