Question

我找到了下面的脚本here，但想知道是否可以使用相同的脚本预加载多个页面。原因是我想预加载一些将在fancybox中保存的表单，并且加载时间太长。使用此脚本可以更快地加载表单（它可以正常工作），但我不知道如何使它适用于多个页面。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery().ready(function () {
    $.get('index2.html', function(data) {
     jQuery("#index2content").html(data);
    });
  });
</script>

<div id="index2content"></div>

Answer 1

此脚本加载页面＆＃34; index2.html＆＃34;

时，将其内容放入div＃index2content中。

因此，如果要加载多个页面，可以执行以下操作：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery().ready(function () {
    $.get('index2.html', function(data) {
     jQuery("#index2content").html(data);
    });

    $.get('index3.html', function(data) {
     jQuery("#index3content").html(data);
    });

    $.get('index4.html', function(data) {
     jQuery("#index4content").html(data);
    });
  });
</script>

<div id="index2content"></div>
<div id="index3content"></div>
<div id="index4content"></div>

Answer 2

三个选项：

a）设置一个可以提供整个html的API，然后使用$ .AJAX获取数据，因为过载，这将是一个不好的做法

b）

<script>
     var html = '<?php echo $html_file;?>'; 
     jQuery("#index2content").html(html);
</script>

c）

<iframe id="data" style="display:none" src="your document">
</iframe>

<script>
$("#data").load(function(){
    $("#index2content").html($("#data").contents().find("body").html());
    $("#data").remove();/detach the iframe
});
</script>

使用jQuery预加载网页

2 个答案: