如何使用 JavaScript 使网站仅加载某个 div(class) 以节省加载时间答案

【问题标题】：How to make a website load only a certain div(class) to save load time, using JavaScript如何使用 JavaScript 使网站仅加载某个 div(class) 以节省加载时间
【发布时间】：2016-06-06 21:50:41
【问题描述】：

是否可以只为我加载某个 div 是

<div class="the-container">Demo...</div>

如果页面上的任何链接被点击，我希望整个页面保持不变，除了使用 JavaScript 的页面部分，而且它应该发生在滑动过渡中。我试过在谷歌上搜索它，但它对我没有帮助，因为我的 JavaScript 很差。请帮忙，谢谢！

【问题讨论】：

使用Ajax。
如果你真的想在点击后加载，你可能会使用Ajax。否则，您可以隐藏元素。请注意，这是不同的。
我以为 AJAX 和 JS 是一回事，哈哈！

标签： javascript jquery html ajax load

【解决方案1】：

最常见也可能是最好的方法是使用 Ajax。但是我会用不同的解决方案来回答。它可能不是最好的，但它可以工作，而且这个答案不需要服务器。这将使用 jQuery 和 Malsup 的 Cycle 插件。您可以使用可以包含您的内容的 div，而不是在插件上使用图像。然后将您的链接用作寻呼机。

这是一个样式极少的小提琴：http://jsfiddle.net/gdd49xdf/

HTML

<div class="container">
    <div class="contentbox">About Content</div>

    <div class="contentbox">Portfolio Content</div>
    <div class="contentbox">Services Content</div>
    <div class="contentbox">FAQ Content</div>
    <div class="contentbox">Contact Page</div>
</div>
<!-- Menu -->
  <div class="menu">
    <ul id="menu2">
      <li><a class="firstli" id="about" href="about">about</a></li>
      <li><a class="firstli" id="portfolio" href="portfolio">portfolio</a></li>
      <li><a class="firstli" id="services" href="services">services</a></li>
      <li><a class="firstli" id="faq" href="faq">faq</a></li>
      <li><a class="firstli" id="contact" href="contact">contact</a></li>
    </ul>
  </div>

jQuery 循环脚本

$(document).ready(function () {
   $('.container').cycle({ 
    fx:     'fade', 
    speed:  1000,
    delay: 5000, 
    timeout: 0,
    //sync:   0,
    containerResize: 0,
    slideResize: 0,
    pager:  '#menu2', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#menu2 li:eq(' + idx + ') a'; 
    } 
});
});

CSS 样式和循环效果由您决定。

【讨论】：

不！我希望在所有页面的所有链接中，它也不起作用。

【解决方案2】：

<html>
    <head>

    </head>
    </body>
<a href="file1.html">File 1</a> | 
<a href="file2.html">File 2</a>

<br><br>
<div class="the-container">Contain will be load here!</div>


<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
    $('a').click(function(e){
        e.preventDefault();
        $('.the-container').text('Please wait...');
        $('.the-container').load($(this).attr('href'));
    })
})
</script>

load() 方法需要服务器。

【讨论】：

两次加载页眉，不显示网址