在成功函数之前加载jQuery ajax中的所有文件PHP jQuery

我有一个像这样的脚本。在成功函数之前加载jQuery ajax中的所有文件PHP jQuery

jQuery ajax加载我的所有文件没有问题。 ajax_load_books.php文件中有很多css和js（内联编辑，滑块等）文件。

的问题是：

如何将所有文件加载成功功能之前，使用户可以看到，直到所有的文件都加载了loader_div消息。换句话说 - 加载所有的js/css文件并继续执行成功功能。即使我已经使用函数进行了检查。有人可以重新定义下面的代码。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".form-control").change(function() { 
      var id = $(this).val(); 
      var dataString = 'id=' + id; 
      $.ajax({ 
       type: "POST", 
       url: "ajax_load_books.php", 
       data: dataString, 
       cache: false, 
       beforeSend: function() { 
        $("#loader_div").show(); 
       }, 
       success: function (html) { 
        $("#loader_div").hide(); 
        $("#txtHint").html(html); 
       } 
      }); 
     }); 
    }); 
</script>

感谢，

Kimz

来源

2014-04-01 user3350885

那么目前发生了什么？ –

所有内容都会立即加载，但在加载页面几秒后会应用js和css。 – user3350885

不应该有一个很大的滞后，除非你有很多文件加载，我猜你可以在这种情况下，你可以使用像[jQuery.parseHTML（）]（http://api.jquery.com /jquery.parsehtml/）首先获取样式表和脚本，并将其附加到您的''，然后放置内容。 –

的CSS文件，你可以使用jQuery.parseHTML()功能找到他们，但<script>将与此进行中剥离，所以我们反而将不得不使用正则表达式<script>标签。

尝试：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".form-control").change(function() { 
      var id = $(this).val(); 
      var dataString = 'id=' + id; 
      $("#loader_div").show(); 
      $.ajax({ 
       type: "POST", 
       url: "ajax_load_books.php", 
       data: dataString, 
       cache: false, 
       beforeSend: function() { 

        //parsing <link> 
        var $str = $('<output>'); 
        //loading html into fake tag 
        $str.load("ajax_load_books.php"); 
        //now $str includes all your page code 
        temp = $.parseHTML(str); 
        $.each(temp, function (i, el) { 
         //finding the <link> tag 
         if (el.nodeName == 'LINK') { 
          //appending it to the <head> tag 
          $('head').append("<link rel='stylesheet' href='" + el.getAttribute('href') + "'>"); 
         } 
        }); 

        //for script we will use regex 
        var pattern = /<script[^>]+?>.*?<\/script>/gi; 
        var matches = str.match(pattern); 
        var scripts = ""; 
        for (var i in matches) { 
         scripts += matches[i]; 
        } 
        //appending script tag to <head> 
        $('head').append(scripts); 
       }, 
       success: function (html) { 
        $("#loader_div").hide(); 
        $("#txtHint").html(html); 
       } 
      }); 
     }); 
    }); 
</script>

Demo

没有与此缺点，样式表和脚本代码会重复。如果上述代码因为重复而导致问题运行，则应该将代码beforeSend()放在AJAX之前，并从AJAX函数发送一个参数，指示当使用此参数调用AJAX时，执行除样式表之外的所有HTML和js脚本。

来源

2014-04-01 08:24:37

在成功函数之前加载jQuery ajax中的所有文件PHP jQuery

回答

相关问题