我正在创建这个自定义主题 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 与它周围加载的所有内容都不成比例,因此图像 slider 不会启动,你会留下一团乱麻的渲染图像。
这个问题最让人恼火的是,有时它运行良好,有时却一团糟,这取决于页面加载的速度,或者您是否已将网站缓存在浏览器中。
要查看我的 Javascript 的范围以及我如何调用此照片集函数,请参见此处:
http://helloauan.com/apps/DILTtheme/utils.js
我知道这有点乱,因为我是新手。 :)
谢谢。
最佳答案
我不知道它是否有帮助,但你可以尝试以下方法:
如果图像大小相同并且您知道该大小,则将“.slide”div 设置为该大小;
尝试预加载图像并仅在加载图像时才开始放映幻灯片。例如使用 preload plug-in .
并利用“回调”功能。
关于javascript - 使用 tumblr JSON 呈现自定义照片集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4816018/