具有/多个图像尺寸的响应式jQuery幻灯片高度

Question

我让开发人员根据 960 像素的布局设计制作了幻灯片。现在，我正在创建一个响应式设计。我一直很难修复幻灯片加载功能。当您点击下一张图片时，幻灯片下方的内容会先向上滑动，然后再向下滑动。缓存图像时效果很好。

我尝试了很多东西，但是我的jQuery知识有点缺乏。有人有建议吗？您可以在以下汇编链接中找到代码和脚本： https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=JohnMerriam

http://jsfiddle.net/doobada/HDyyk/

我尝试将#real_display li 高度设置为等于预加载的图像，但我无法弄清楚。我还尝试将#real_display li 高度设置为等于当前图像，然后隐藏 li，然后在加载图像后将 #real_display li 高度设置为 auto。

JS：

$('#real_display li:visible').hide(0); 

var customURL = window.location.href;

$('#info_box').remove();

$('#real_display').append('<div id="info_box"><ul id="social_buttons_box"></ul>'+
                                '<p>'+curr_obj["img_caption"]+'&nbsp;'+
                                '<a href="'+curr_obj["img_href"]+'">'+curr_obj["img_author"]+'</a></p></div>');

$('#social_buttons_box').hide();

setTimeout(function(){$('#social_buttons_box').fadeIn(500);}, 0);

var curr_dom_obj_li = $('#rimg_id_'+img_num);
var curr_dom_obj = curr_dom_obj_li.find('img');

if(curr_dom_obj.attr("src") == ""){
    curr_dom_obj.attr("src", curr_dom_obj.attr("link"));
}

curr_dom_obj_li.fadeIn(500);

我被困住了，到处寻找答案。

Answer 1

您可能只想使用 JQuery 预加载图像，而不是尝试确定下一张图像的大小并动态更改高度。一旦加载了您提到您满意的图像，这将为您提供您获得的效果。

使用 JQuery 预加载图像的说明here。