I'm using Ajax to load the content of another page in a div with Twitter Bootstrap tabs, but the ajax is taking too long to load the page.
Without Ajax page loads very fast!

Page loaded in ajax call: 28.743376016617 ms
Page loaded without ajax: 0.00022506713867188 ms

This is a code of the ajax call:

    $(function() {
    $("#MainTabs").tab();
    $("#MainTabs").bind("show", function(e) {
      var contentID  = $(e.target).attr("data-target");
      var contentURL = $(e.target).attr("href");

      if (typeof(contentURL) != 'undefined')

    $(contentID).html('<img src="<?php echo IMG_DIR; ?>loading/loading-large.gif" width="64" />').load(contentURL, function(){
        $("#MainTabs").tab();
    });
      else
    $(contentID).tab('show');
    });
    $('#MainTabs a:first').tab("show");
}); 

This is a PHP Code:

<?php
$start = microtime(TRUE); // Start counting

ob_start();
session_start();

$temp = microtime(TRUE) - $start;
echo $temp;

exit;

/*
 * Here is the rest of the contents of the script, so I gave the 'exit' and even with the exit delay it that way!
*/

Does anyone know what is happening and how to help me? The PHP code is very simple and is taking too long!

Thanks!

I'm using Ajax to load the content of another page in a div with Twitter Bootstrap tabs, but the ajax is taking too long to load the page.
Without Ajax page loads very fast!

Page loaded in ajax call: 28.743376016617 ms
Page loaded without ajax: 0.00022506713867188 ms

This is a code of the ajax call:

    $(function() {
    $("#MainTabs").tab();
    $("#MainTabs").bind("show", function(e) {
      var contentID  = $(e.target).attr("data-target");
      var contentURL = $(e.target).attr("href");

      if (typeof(contentURL) != 'undefined')

    $(contentID).html('<img src="<?php echo IMG_DIR; ?>loading/loading-large.gif" width="64" />').load(contentURL, function(){
        $("#MainTabs").tab();
    });
      else
    $(contentID).tab('show');
    });
    $('#MainTabs a:first').tab("show");
}); 

This is a PHP Code:

<?php
$start = microtime(TRUE); // Start counting

ob_start();
session_start();

$temp = microtime(TRUE) - $start;
echo $temp;

exit;

/*
 * Here is the rest of the contents of the script, so I gave the 'exit' and even with the exit delay it that way!
*/

Does anyone know what is happening and how to help me? The PHP code is very simple and is taking too long!

Thanks!

• javascript
• php
• ajax
• jquery

Share Improve this question Follow edited Nov 29, 2013 at 8:13 Mr Lister 46.6k1515 gold badges113113 silver badges155155 bronze badges asked Nov 28, 2013 at 12:23 user2297392user2297392 7

• even if it was synchronous, with a single request test it should not make much difference... certainly not such a huge difference. – Kinjal Dixit Commented Nov 28, 2013 at 12:28
• this is your real code? Any other inclusion? DB connection and some other things like this? – Luca Rainone Commented Nov 28, 2013 at 12:29
• Are there maybe other requests running at the same time? In that case it could be the session file locking blocking the script that is requested via AJAX. – C3roe Commented Nov 28, 2013 at 12:37
• @chumkiu Amazingly this is my actual code! Simple and VERY, BUT VERY SLOW! – user2297392 Commented Nov 28, 2013 at 12:38
• If I enter the script directly in the browser without Ajax it loads very fast. – user2297392 Commented Nov 28, 2013 at 12:39

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

Do your Ajax load the html from backend that take time to produce html ?

Without Ajax you load less data so that's how its' run fast.

If you load the data that is not so usual then load through Async script. Load the ajax div seconds later after page load.

1. cancel the ajax request if this take a long time to load.

   $(document).ready(
   var xhr;
   
   var fn = function(){
       if(xhr && xhr.readyState != 4){
           xhr.abort();
       }
       xhr = $.ajax({
           url: 'ajax/progress.ftl',
           success: function(data) {
               //do something
           }
       });
   };
   
   var interval = setInterval(fn, 500);
   

   );

Please use .ajax() call instead of .load().

Try this:

$(contentID).html('<img src="<?php echo IMG_DIR; ?>loading/loading-large.gif" width="64" />');
$(contentID).ajax(
   url: contentURL, 
   type: "GET",//or POST
   success: function(data){
     $(contentID).html(data);
     console.log(data);//it will show the error log if any [optional]
   }
});

Check here for ajax call

I had same issue and after adding headers:

header("Content-Length: xxx")

it works very fast.