Javascript 使用tumblr JSON呈现自定义照片集

我正在创建这个自定义主题www.designislikethis.tumblr.com，它使用jQuery砌体和滑块插件。在创建这个主题时，我想创建自己的photoset幻灯片，而不是使用默认的基于Flash的幻灯片

我首先使用JS和jQuery从每个photoset帖子的JSON中通过帖子的ID提取图像

然后，我将这些图像以一个特殊的div呈现到我的frontpage上，该div链接到一个最小的jQuery幻灯片插件，因此每个图像都会淡入淡出

我用于为每个photoset帖子绘制/渲染的代码如下：

    function photoSet() {
    $('.photoset').each(function () {

            var postID = $(this).attr('id');
            var that = $(this);
               $.getJSON("http://designislikethis.tumblr.com/api/read/json?id="+postID+"&callback=?", 
                  function(data) {
                      var postPhotos = data["posts"][0]["photos"];
                      var postPermalink = data["posts"][0];
                            for(var i = 0; i<postPhotos.length; i++) 
                            {
                                var photo250 = new Image();
                                photo250.src = postPhotos[i]['photo-url-250'];
                                postLink = postPermalink["url-with-slug"];
                                var setClass = ".photoset"+ i;
                                var imgClass = ".img"+ i;
                                $(that).find('.slide').append('<a class="'+ setClass +'" href="'+postLink+'"><img class="'+ imgClass +'" src="' +photo250.src+ '"/></a>');
                            }
                 });
              });
   }

函数photoSet（）{
$（'.photoset'）。每个（函数（）{
var postID=$（this.attr（'id'）；
var，该值=$（此值）；
$.getJSON（“http://designislikethis.tumblr.com/api/read/json?id=“+postID+”&回调=？”，
功能（数据）{
var postPhotos=data[“posts”][0][“photos”]；
var postermarlink=data[“posts”][0]；
对于（var i=0；i我不知道它是否有用，但您可以尝试以下方法：

如果图像大小相同，并且您知道该大小，请将“.slide”div设置为该大小

尝试预加载图像并仅在加载图像时启动幻灯片放映。例如，使用

以及使用“回调”函数。
我不知道它是否有用，但您可以尝试以下方法：

如果图像大小相同，并且您知道该大小，请将“.slide”div设置为该大小

尝试预加载图像并仅在加载图像时启动幻灯片放映。例如，使用

以及使用“回调”函数