.load() jquery slow when include script like javascript or css

Question

I have this code: First.html ..

 <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
 <script type="text/javascript" src="../js/prj1100.js"></script>
 <LINK href="../css/prj1100.css" rel="stylesheet" type="text/css">
..

Event to load page.html

  jQuery(".content").click(function(){
 $(".content_2").load('page.html');}

Inside page.html, there are:

 <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
 <script type="text/javascript" src="../js/prj1100.js"></script>
 <LINK href="../css/prj1100.css" rel="stylesheet" type="text/css">
 <?php

 ...

This code works perfectly however when click more than one time to load this page is taking too much time to show page.html. Its seems that .load() instance every time .js into memory.

I included on page.html again because declared on first.html not inherited to page.html.

How can I improve this code ?

Don't you experience RangeError: Maximum call stack size exceeded? — Gideon
– Gideon, Commented May 28, 2015 at 6:23

Shashank Srivastava · Accepted Answer · 2015-05-28 04:24:04Z

Usually, we wont have to link jquery libraries and other files in both pages repeatedly. Libraries and stylesheets linked to first.html must work for page.html as well. See this link Plunkr

index.html

<h1>Hello Plunker!</h1>
<button>Load First</button>
<div class="first"></div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>
<script>
  $(document).ready(function() {
    alert('index loaded!');
    $('button').click(function() {
      $('.first').load('first.html');
    })
  });
</script>

first.html

<h1>Hello First!</h1>  

<script>
  $(document).ready(function() {
    alert('first loaded!');
  });
</script>

However, if you still have to link all the files and scripts in both the pages, the most efficient way to do it is at the bottom of your pages. DOM load time is significantly shortened.

Mehdi Dehghani · Accepted Answer · 2015-05-28 04:31:13Z

0

Sorry, I can not post comment, so I have to ask my question as an answer, do you want to load html content with ajax? If so, you need to apply some changes to your code, first you should add a class or id to target content, like this:

<body>
    <div class='target'>
        // ....
    </div>
</body>

then you should load only target, like this:

$('#result').load( URL + " .target" );

You can use [pjax] too. (https://github.com/defunkt/jquery-pjax)

I hope I got you correctly and this help to you.

answered May 28, 2015 at 4:31

Mehdi Dehghani

11.7k6 gold badges64 silver badges68 bronze badges

Collectives™ on Stack Overflow

.load() jquery slow when include script like javascript or css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related