CODEWITHSUNDEEP
javascriptjqueryhtml
user2359466
user2359466

Reputation: 17

jQuery .load function gets slow after few clicks

I am trying to load different external HTMl files into a DIV in my parent HTML. Here is the code I am using

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BeautyDish Photography | Wedding and Beauty Photographer</title>
<meta name="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

</head>
<body>

<div id="wrapper" style=" max-width:1920px; min-width:1024px;">
  <nav>
    <div id='MainMenu'> 
        <a href="home">Home</a> 
        <a href="aboutus" id="aboutus">About Us</a> 
        <a href="portfolio" id="portfolio">Portfolio</a> 
        <a href="contactus" id="contactus">Contact Us</a> 
    </div>
  </nav>
  <div id="content" style="width:1200px; padding:0; margin:auto;">ff

  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="js/main.js"></script>
<script>
$(function(){
$("#MainMenu a").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#content").load($(this).attr('href')+".html", null, function(){
        alert('Load Done');
        });
});
});
</script>
</body>
</html>

Whenever I click any link for the first time it works perfectly, from second click onward the loading is taking longer and the alert is coming more than once. I have also hosted a working version at http://www.jbasuphotography.com/index_new.html I am new to jQuery, please let me know how to solve the problem.

Upvotes: 0

Views: 2734

Answers (2)

max li
max li

Reputation: 2457

before the load you can do a remove first, because its loading multiple files in.

$('#wrapper #content').remove();
$('#wrapper').append('<div id="#content"></div>')

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382102

The problem seems to be that you're loading the whole page inside a div of itself.

And it's included with its script and event binding which can only make it worse.

A solution could be to reduce to the part that really interests you (a different page). But this solution would have to be designed for your real need which isn't clear.

Upvotes: 3

Related Questions