cycle2.js 在通过 ajax 加载 dom 元素之前触发答案

【问题标题】：cycle2.js fireing before dom elements are loaded via ajaxcycle2.js 在通过 ajax 加载 dom 元素之前触发
【发布时间】：2014-03-31 01:56:10
【问题描述】：

我一直在使用 tumblr 的 v1 json api 从帖子中获取图片，这部分工作得很好。但是，一旦将这些图像放入 dom 中，我就无法触发周期 2 插件 - 它似乎启动得太快了。

这是一个有效的小提琴：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();} });

【问题讨论】：

我现在要玩这个，但我警告不要使用 API 的 V1，因为 Tumblr 工作人员/支持人员一再声明它最终会停止使用。
我听说过 API，但您可以告诉我，我对 JSON 等很陌生，而且新的 API 具有额外的复杂性。自从我发布这篇文章以来，那些运营网站的人发布的方式略有改变，所以甚至还没有出现单张图片。

标签： jquery ajax json tumblr jquery-cycle2

【解决方案1】：

它需要一些工作，但我相信我已经确定了您的主要问题：如果只有一张照片，则数组 photos 为空，您需要从对象的其他位置获取有关照片的信息.

查看我修改后的 JS Fiddle here。

【讨论】：

Ally，你解决了一个我还没遇到过的问题！非常感谢。但是，我仍然遇到无法实例化幻灯片的原始问题。 ://
所以我已经弄清楚了如何通过在渲染函数中链接到连接调用的末尾来实例化循环。我对如何将循环“烘焙”到此脚本中感到不满意，我真的希望能够在之后通过回调触发它，但现在这很好。

【解决方案2】：

因此，在幻灯片被动态添加到 DOM 之后，我确实找到了触发幻灯片的解决方案。尽我所能尝试在将元素添加到 DOM 之后，我从来没有找到触发幻灯片的方法，在同一个脚本中。我的解决方案的开销可能不是最低的，但我发现最简单的方法是创建第二个脚本，它只需每半秒检查一次新的 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/

我很想看看其他方法，但这是一个可行的解决方案。

【讨论】：