dom2.axs가 ajax를 통해로드되기 전에 실행됩니다.

Question

나는 tumblr의 v1 json API를 사용하여 게시물에서 이미지를 가져 왔으며이 부분은 잘 작동합니다. 그러나 Im이주기 2 플러그 접속 식을 방아쇠를 당길 수 없으면, 일단이 심상이 dom으로두면 - 그것은 너무 빨리 발사하는 것처럼 보인다. http://jsfiddle.net/orionrush/9XEw2/

을 감안할 때 내 예는 사람이 왜 작동하지 않습니다에 관한 올바른 방향으로 날 지점 수 있습니다 여기에

는 작업 바이올린입니까? 많은 감사 한마디로

나는 이미지를 가져오고 다음으로 DOM에 그들을 배치 :

var Tumblr = Tumblr || {}; 
Tumblr.RecentPhotos = function(el, postsCount, tagged) { 
    var apiUrl = "http://2014frames.tumblr.com/api/read/json?callback=?&filter=text&type=photo&num=" + (postsCount || 10) + "&tagged=" + tagged; 
//var apiUrl = "http://" + document.domain + "/api/read/json?callback=?&filter=text&type=photo&num=" + (postsCount || 10)+ "&tagged=" + tagged; 

    var renderPosts = function(posts) { 
    return $.map($.map(posts, postInfo), renderPost); 
    }; 

    var renderPost = function(post) { 
    //return "<div><a href='" + post.url + "' ><img src='" + post.src + "' width='500' data-cycle-title='"+ post.title + "' /><div class='cycle-overlay'>" + post.title + "</div></a></div>"; 
    return "<div><img src='" + post.src + "' width='100%' data-cycle-title='"+ post.title + "' /><div class='cycle-overlay'>" + post.title + "</div></div>"; 

    }; 
    var postInfo = function(post) { 
    console.log(post.photos[0]); 
     return { 
     title: post.photos[0]['caption'], 
     url: post["url"], 
     height: post.photos[0]['height'], 
     src: post.photos[0]['photo-url-500'] 
     }; 
    }; 
    return { 
    render: function() { 
     $.getJSON(apiUrl, function(data) { 
     $("<div class='cycle-slideshow composite-example' data-cycle-fx=fadeout data-cycle-timeout=0 data-cycle-loader=wait data-cycle-auto-height=container data-cycle-slides='> div' >").appendTo($(el)).append(renderPosts(data.posts).join("\n")); 
     }); 
     return this; 
    } 
    } 
}; 

그리고 다음으로 모든 트리거 :

jQuery(function() { new Tumblr.RecentPhotos(jQuery(".slideshow"),10 ,"news").render(), function(){$(".cycle-slideshow").cycle();} }); 

Answer 1

그것은 몇 가지 작업이 필요합니다 그러나 나는 당신의 주된 문제를 발견했다고 생각합니다 : 오직 한 장의 사진이 있다면, 배열 photos은 비어 있습니다. 그리고 당신은 그 객체의 다른 곳에있는 사진에 대한 귀하의 정보를 얻을 필요가 있습니다.

변경된 JS Fiddle here을 참조하십시오.

Answer 2

DOM에 동적으로 추가 된 슬라이드 쇼를 트리거하는 솔루션을 찾았습니다. 같은 스크립트 내에서 요소가 DOM에 추가 된 후 슬라이드 쇼를 실행하는 방법을 찾지 못했을 수도 있습니다.. 내 솔루션에 가장 낮은 오버 헤드가 없을 수도 있지만 가장 간단한 방법은 두 번째 스크립트를 만드는 것입니다. 두 번째 스크립트는 매 30 초마다 새 DOM 요소를 간단히 확인한 다음 슬라이드 쇼가 시작된 후 해고되었습니다. 여기

setTimeout(function trigger() { 
    if ($('.cycle-slideshow').length) { 
     $('.cycle-slideshow').cycle({ 
      timeout: 6000, 
      fx: 'fadeout', 
      random: true, 
      pauseOnHover: true, 
      autoHeight: 'calc' 
     }); 
     } else { 
      // keep trying until the slideshow elements are added to DOM 
      setTimeout(trigger, 50); 
     } 
     }, 50); 
    }); 

내 작업 바이올린 : 트리거 이런 식으로 뭔가를 보이는

http://jsfiddle.net/orionrush/pAMLM/

나는 다른 방법을보고 싶지만,이 작업 솔루션입니다.