Question

我有一个简单的JQuery幻灯片，当图像添加到HTML时，它可以很好地工作。但是，我需要使用AJAX添加图像，这会导致以下问题：

幻灯片JS的工作方式是首先隐藏除第一张幻灯片外的所有幻灯片图像。之后，它会隐藏并显示下一张图像。但是因为图像是通过AJAX添加的，所以它们一开始就不会被隐藏。它们只是叠加起来并逐一消失。在它们全部消失后，幻灯片开始播放。

这是幻灯片JS：

$("#spotlight_holder > div:gt(0)").hide();

setInterval(function() { 
    $('#spotlight_holder > div:first')
        .fadeOut(1000)
        .next()
        .delay(1000)
        .fadeIn(1000)
        .end()
        .appendTo('#spotlight_holder');
}, 5000);

我知道我必须使用on（）函数来执行事件委托，但在这种情况下我不知道如何使用它。

修改

这是幻灯片的HTML：

<div id="spotlight_holder">
    <div class="show spotlight_item snap_item">
        <img src="..." alt="..." />
    </div>
    <div class="show spotlight_item snap_item">
        <img src="..." alt="..." />
    </div>
    <div class="show spotlight_item snap_item">
        <img src="..." alt="..." />
    </div>
    <div class="show spotlight_item snap_item">
        <img src="..." alt="..." />
    </div>
    <div class="show spotlight_item snap_item">
        <img src="..." alt="..." />
    </div>
</div>

运行AJAX时，这是HTML的结构。

我的AJAX是：

function load_slideshow_images() {
    $.post( "http://localhost/snapll_back/moment/spotlight.php?id="+url_user_id,
    function(info) {        
        $("#spotlight_holder").html(info);
    });
    return false;      
}

Answer 1

如果您需要异步加载图像，那就没关系...一旦您检索到它们，然后初始化您的滑块。

我不确定您使用的是哪个滑块插件，或者您正在构建一个滑块插件，但假设您使用的是jQuery cycle，则可以执行此操作

<div class="pics"> 
  <!-- loading these images ansync instead -->
  <!-- <img src="images/beach1.jpg" width="200" height="200" /> 
  <img src="images/beach2.jpg" width="200" height="200" /> -->
</div> 


$(document).ready(function(){
  loadImages();
  startSlideShow();
});

function loadImages() {
  // load images into pics once retrieved
  $(".pics").append("<img src="images/beach1.jpg" width="200" height="200" />")
}

function startSlider() {
  $('#pics').cycle('fade');
}

你可以让一个加载器运行，直到滑块就绪，加载图像后隐藏加载器。

使用像knockout.js或Angular这样的绑定/ MV *框架也可能更好，因为它们允许您以声明方式设置html并绑定模型中图像的值。 Here是使用AngularJs

的简单滑块的示例

带有动态添加图像的简单幻灯片不起作用

1 个答案: