.load()当包含像javascript或css这样的脚本时，jquery很慢

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

本文关键字：脚本 很慢 jquery css 包含像 javascript load      更新时间：2023-09-26

我有这样的代码: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">
..

事件加载page.html

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

在page.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">
 <?php
 ...

这段代码工作完美，但是，当点击多次加载此页面需要太多的时间来显示page.html。似乎每次.js进入内存时.load()实例。

我又包含在page.html上了，因为声明在first.html上，没有继承到page.html。

如何改进代码?

通常，我们不需要在两个页面中重复链接jquery库和其他文件。链接到first.html的库和样式表也必须适用于page.html。查看此链接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>

但是，如果您仍然需要链接两个页面中的所有文件和脚本，那么最有效的方法是在页面底部进行链接。DOM加载时间明显缩短。

对不起，我不能发表评论，所以我不得不问我的问题作为答案，你想用ajax加载html content吗?如果是这样，则需要对代码进行一些更改，首先应该向目标内容添加class或id，如下所示:

<body>
    <div class='target'>
        // ....
    </div>
</body>
那么你应该只加载target，像这样:

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

你也可以使用[pjax]。(https://github.com/defunkt/jquery-pjax)

我希望我理解对了，这对你有帮助。

相关文章：