Search code examples
javascriptjquerypreload

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 fancybox and it takes too long to load. Using this script help load the form much faster (it works) but I don't know how to make it work for multiple pages.

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

Solution

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

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