CODEWITHSUNDEEP
javascriptphphtml
Vivek Jain
Vivek Jain

Reputation: 81

why loading a div from external url is very slow?

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

Upvotes: 0

Views: 245

Answers (2)

jaswanth
jaswanth

Reputation: 525

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)});
  }
}

Upvotes: 1

DK Dhilip
DK Dhilip

Reputation: 2644

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);
        });
    }
}

Upvotes: 1

Related Questions