jquery - 如何将 AJAX 加载添加到 Niall Doherty 的 Coda Slider？

Question

我正在实现 Niall Doherty's Coda Slider进入网页正文。问题是我的客户拥有的内容量给页面带来了大量的加载时间。

我想做的是将内容分割成单独的 html 文件，然后单击选项卡触发器，加载内容，然后为开关设置动画。

老实说，我不知道如何做到这一点，所以遗憾的是我无法提供任何虚假代码来帮助说明我的观点。任何和所有的帮助将不胜感激。我在 Coda 论坛上搜索过这样的解决方案，但我得到的只是人们声称拥有它，但无意提供帮助。

干杯。

Answer 1

最简单的方法是将其存储在一个 html 文件中并使用 load() 检索它

直接来自 jquery 文档:

$('#result').load('ajax/test.html #container');

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

如果这仍然很慢，只需将其分成多个页面，然后一次加载一页

$('#result').load('ajax/test.html');

我不完全确定这是最好的方法，但你可以这样做:

    <script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="javascripts/jquery.coda-slider-2.0.js"></script>
     <script type="text/javascript">
        $().ready(function() {
            $('#coda-slider-1').codaSlider();
            $("#panel1").load("panel1.html");//populate on load
            $("li.tab1 a").click(function() {
                $("#panel1").load("panel1.html");//populate on click
            });
            $("li.tab2 a").click(function() {
                $("#panel2").load("panel2.html");
            });
        });

     </script>

向 div class="panel-wrapper"id="panel1"添加 id

<div class="coda-slider-wrapper">
        <div class="coda-slider preload" id="coda-slider-1">
            <div class="panel">
                <div class="panel-wrapper" id="panel1">
                    <h2 class="title">Panel 1</h2>
                    <p></p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper" id="panel2">
                    <h2 class="title">Panel 2</h2>
                    <p></p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper" id="panel3">
                    <h2 class="title">Panel 3</h2>
                    <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.</p>
                </div>