Preload Webpage With Jquery

I found the below script here but wanted to know if it is posible to preload multiple pages with the same script. The reason is I want to preload some forms that will be hold in f

Solution 1:

This script loads the page "index2.html" and puts its content into the div#index2content when the DOM is ready.

So, if you want to load multiple pages, you can do the following:

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="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><divid="index2content"></div><divid="index3content"></div><divid="index4content"></div>

Solution 2:

Three options:

a) Setup an API that would serve the whole html, then just get the data using $.AJAX, witch would be a bad practice because of overload

b)

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

c)

<iframeid="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>