CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Andre Silva
Andre Silva

Reputation: 1

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

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 ?

Upvotes: 0

Views: 747

Answers (2)

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

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.

Upvotes: 0

Shashank Srivastava
Shashank Srivastava

Reputation: 111

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.

Upvotes: 1

Related Questions