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

时间:2011-01-27 11:57:51

标签: javascript jquery json tumblr

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

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

然后我将这些图像渲染到我的首页上,在一个特殊的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>');
                            }
                 });
              });
   }

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

这个问题最令人烦恼的是,它有时会运行正常,而其他情况则很糟糕,具体取决于页面加载的速度,或者您的网站是否已经在浏览器中缓存过。

要查看我的Javascript的范围以及我如何调用此photoset功能,请参阅此处:

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

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

感谢。

1 个答案:

答案 0 :(得分:2)

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

如果图像大小相同,并且您知道该尺寸将“.slide”div设置为该值;

尝试预加载图像,仅在加载时启动幻灯片放映。例如使用preload plug-in

并利用“回调”功能。