동적으로 추가 된 이미지가있는 간단한 슬라이드 쇼가 작동하지 않습니다.

Question

이미지가 HTML에 추가 될 때 완벽하게 작동하는 간단한 JQuery 슬라이드 쇼가 있습니다. 그러나 다음과 같은 문제가 발생하는 AJAX 이미지를 추가해야합니다.

슬라이드 쇼 JS의 작동 방식은 처음 슬라이드를 제외한 모든 슬라이드 쇼 이미지를 숨김으로써 시작한다는 것입니다. 그 후, 다음 이미지를 숨기고 보여줍니다. 그러나 이미지는 AJAX를 통해 추가되기 때문에 처음에는 숨겨지지 않습니다. 그들은 쌓아 올려서 하나씩 사라집니다. 모두 사라진 후 슬라이드 쇼가 시작됩니다. 내가 이벤트 위임을 수행 할에() 함수를 사용하는 것을 알고

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

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

하지만이 경우에는 그것을 사용하는 방법을 모른다 :

이

슬라이드 쇼 JS이다.

AJAX와이 실행

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

은, 이것은 HTML의 구조 :

편집

다음은 슬라이드 쇼의 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

비동기 이미지를로드 할 필요가 있다면, 그건 당신이 검색 일단 그들이 다음 슬라이더를 초기화 ... 괜찮습니다.

난 당신이 사용하거나 하나를 구축하는 경우,하지만 당신은 슬라이더가 준비 될 때까지 당신은 실행하는 로더를 가질 수이

<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'); 
} 

을 할 수 jQuery cycle를 사용하는 가정하고있는 슬라이더 플러그인 확실하지 않다 이미지가로드되면 로더를 숨 깁니다.

또한 knockout.js 또는 Angular와 같은 바인딩/MV * 프레임 워크를 사용하는 것이 더 좋을 수 있습니다. 이러한 프레임 워크를 사용하면 HTML을 선언적 방식으로 설정하고 모델의 이미지 값을 바인딩 할 수 있습니다. Here은 AngularJs를 사용하는 간단한 슬라이더의 예입니다