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

Posted 2023-05-09

【中文标题】如何将 AJAX 加载添加到 Niall Doherty 的 Coda Slider？

【英文标题】：How can I add AJAX loading to Niall Doherty's Coda Slider?

【发布时间】：2011-07-01 09:18:27

【问题描述】：

我正在将Niall Doherty's Coda Slider 实现到网页正文中。这样做的问题是我的客户拥有的内容量使页面加载时间很长。

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

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

干杯。

【参考方案1】：

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

直接来自 jquery 文档：

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

当这个方法执行时，它会获取ajax/test.html 的内容，然后jQuery 会解析返回的文档以找到ID 为container 的元素。此元素及其内容被插入到 ID 为 result 的元素中，而检索到的文档的其余部分将被丢弃。

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

$('#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>

添加一个 id 到 div class="panel-wrapper" id="panel1"

<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>

【讨论】：

这可能是一个毫无意义的问题，但这是否会在每次单击选项卡时一遍又一遍地加载内容并将其附加到容器中？

我将如何在 coda-slider 中实现它？

我认为 load() 会缓存页面，因为如果你想禁用缓存，你需要使用 $.ajax() 而不是 load() 并明确禁用它。