why loading a div from external url is very slow?

Question

I have made two buttons to open two different php pages.

when I click on any of them, it load the respective url into the div. but when when I click another button, it is slow to load the another page.

Switching between button is very slow. sometimes seemes like button does not even work..or hanged.

<div id="ButtonNav" style="width:1487px;margin:10px auto 0;">
<button class="tablink" onclick="openPage('url1.php', this, '#f9bd48')" id="defaultOpen">Admin</button>
<button class="tablink" onclick="openPage('url2.php', this, '#f9bd48')">DB management</button>

<div id="myContent"></div>
</div>

and java script function is so

function openPage(pageName,elmnt,color) {
$("#myContent").load(pageName, function(){
});

tablinks = document.getElementsByClassName("tablink");

for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
}

document.getElementById("myContent").style.display = "block";
document.getElementById("myContent").style.backgroundColor = color;
elmnt.style.backgroundColor = color;
}

any guess or help what shall I do better to get optimum performance?

Thanks in advance

What happens if you access those URL's directly through the browser? If you try and do that a few times (but don't forget to clear the browser cache between the attempts) and see if it's slow then as well. We need to know if it's the ajax request that's slow or the pages that's slow. — Magnus Eriksson, Dec 13 '19 at 12:46
Btw, you wrote "external url" while the URL's in the code (`url1.php` and `url2.php`) looks local? — Magnus Eriksson, Dec 13 '19 at 12:50
I think, you can better do this using iFrame: See this: https://stackoverflow.com/questions/1088544/get-element-from-within-an-iframev — Alexandre, Dec 13 '19 at 12:52
@MagnusEriksson yes these sites are actully hosted on the same server as this new page with buttons. but these php sites not fetching a lot of data from the other servers so they are slow. now we want to manage all the other pages from the main pages where buttons are linked to these pages — Vivek Jain, Dec 13 '19 at 13:29
I have no idea what you mean by _"but these php sites not fetching a lot of data from the other servers so they are slow"_ - It sounds like you're saying that's the pages you're loading that's slow? Then you should debug _those_ pages, not the above code that loads them. The above code can't make the other pages load faster. — Magnus Eriksson, Dec 13 '19 at 14:24

jaswanth · Answer 1 · 2019-12-14T00:46:44.510

The first mistake that is being done here we are fetching the same response, every time user clicks on the button, it is better to fetch the data before even user clicks on it and add the data based on user action Eg:

var content = {
  "url1.php": {
    resp: null
  },
  "url2.php": {
    resp: null
  }
};

$url1 = $.get("url1.php").done(function(resp){
  content["url1.php"]["resp"] = resp;
});
$url2 = $.get("url2.php").done(function(resp){
  content["url2.php"]["resp"] = resp; 
});

content["url1.php"]["xhr"] = $url1;
content["url2.php"]["xhr"] = $url2;

function addHtml(elmnt, color){
  $("#myContent").html(content[pageName].resp);
  tablinks = document.getElementsByClassName("tablink");

  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }

  document.getElementById("myContent").style.display = "block";
  document.getElementById("myContent").style.backgroundColor = color;
  elmnt.style.backgroundColor = color;
}

function openPage(pageName, elmnt,color) {
  // removed paranthesis
  if(content[pageName].xhr.readyState == 4){
    addHtml(pageName, elmnt, color);
  }
  else{
    content[pageName].xhr.done(function(){addHtml(pageName, elmnt, color)});
  }
}

I want to try your code but its throwing an error: Uncaught TypeError: content[pageName].xhr.readyState is not a function, — Vivek Jain, Dec 13 '19 at 13:43

score 1 · Answer 2 · answered Dec 13 '19 at 15:51

When the actual PHP pages are slow to load, why not put a loading indicator on the myContent div? For example:

var container = $("#myContent");
var tablinks = $(".tablink");

function openPage(pageName, elmnt, color) {
    tablinks.prop("disabled", true);
    container.text("Loading...");

    container.load(pageName, function (response, status) {
        if (status === "error") {
            container.text("Error loading page.");
        }
        tablinks.prop("disabled", false);
    });
}

Or maybe you can "cheat" a little bit to speed things up by preloading pages with onmouseover + cache:

<div id="ButtonNav" style="width:1487px;margin:10px auto 0;">
<button class="tablink" onmouseover="preloadPage('url1.php')" onclick="openPage('url1.php', this, '#f9bd48')" id="defaultOpen">Admin</button>
<button class="tablink" onmouseover="preloadPage('url2.php')" onclick="openPage('url2.php', this, '#f9bd48')">DB management</button>

<div id="myContent"></div>
</div>

var container = $("#myContent");
var tablinks = $(".tablink");

var cache = {};
var requestDone = {};

function preloadPage(pageName) {
    if (typeof cache[pageName] === "undefined") {
        cache[pageName] = $.get(pageName);
    }
}

function openPage(pageName, elmnt, color) {
    var cachedRequest = cache[pageName];

    if (requestDone[pageName]) {
        cachedRequest.done(function (html) {
            container.html(html);
        });
    } else {
        tablinks.prop("disabled", true);
        container.text("Loading...");

        cachedRequest.done(function (html) {
            requestDone[pageName] = true;
            container.html(html);
        });

        cachedRequest.fail(function () { 
            container.text("Error loading page."); 
        });

        cachedRequest.always(function () {
            tablinks.prop("disabled", false);
        });
    }
}

why loading a div from external url is very slow?

2 Answers2