使用 tumblr JSON 渲染自定义照片集答案

【问题标题】：Rendering custom photo set using tumblr JSON使用 tumblr JSON 渲染自定义照片集
【发布时间】：2011-01-27 11:57:50
【问题描述】：

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

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

然后，我将这些图像渲染到我的首页中的一个特殊 div 中，该 div 链接到一个最小的 jQuery 幻灯片插件，因此每个图像都会淡入淡出。

我用来拉取/渲染每个照片集帖子的代码如下：

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

现在我的问题在于我的 tumblr 索引页面上的所有其他元素都不是用 JSON 呈现的，因此它们加载得更快。到我的照片集渲染时，它的 div 与它周围加载的所有内容都不成比例，因此图像滑块不会启动，你会得到一堆渲染图像。

这个问题最烦人的是，有时它可以正常工作，而有时它却是一团糟，这取决于页面加载的速度，或者您的浏览器中是否已经缓存了网站。

要查看我的 Javascript 的范围以及我如何调用此 photoset 功能，请参见此处：

http://helloauan.com/apps/DILTtheme/utils.js

我知道这有点乱，因为我对这一切都是新手。 :)

谢谢。

【问题讨论】：

标签： javascript jquery json tumblr

【解决方案1】：

我不知道它是否会有所帮助，但您可以尝试以下方法：

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

尝试预加载图像并仅在加载后才开始幻灯片放映。例如使用preload plug-in。

并利用“回调”功能。

【讨论】：