在浏览器调整大小时重置 jQuery 脚本

Question

经过无休止的搜索，我希望能弄清楚这一点。本质上，当浏览器窗口调整大小时，我需要编写一个脚本并重新启动它。我在 JS 方面的知识只有足够的危险。

脚本是响应式模板中的非响应式滑块。目前，根据窗口最初加载的分辨率，脚本会更改其输出并适当地显示。但是，如果您调整窗口大小，脚本会变得疯狂并且看起来很糟糕。

我宁愿重写脚本来监听调整大小并重新计算大小，但不幸的是，据我所知，这将是压倒性的。我希望通过重新启动脚本来达到类似的结果。

这是调用幻灯片的时候：

$(document).ready(function()
{
$("#showcase").awShowcase(
{
    content_height:         640,
    fit_to_parent:          true,
    auto:                   false,
    interval:               5000,
    continuous:             true,
    loading:                true,
    tooltip_width:          200,
    tooltip_icon_width:     32,
    tooltip_icon_height:    32,
    tooltip_offsetx:        18,
    tooltip_offsety:        0,
    arrows:                 true,
    buttons:                false,
    btn_numbers:            true,
    keybord_keys:           true,
    mousetrace:             false, /* Trace x and y coordinates for the mouse */
    pauseonover:            true,
    stoponclick:            false,
    transition:             'hslide', /* hslide/vslide/fade */
    transition_speed:       500,
    transition_delay:       300,
    show_caption:           'show', /* onload/onhover/show */
    thumbnails:             true,
    thumbnails_position:    'outside-last', /* outside-last/outside-first/inside-last/inside-first */
    thumbnails_direction:   'horizontal', /* vertical/horizontal */
    thumbnails_slidex:      0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
    dynamic_height:         true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
    speed_change:           false, /* Set to true to prevent users from swithing more then one slide at once. */
    viewline:               true /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. It's OK with only the width. */

});
});

我也有检测窗口大小调整的代码，等待 150 毫秒，然后我迷路了。

var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {

}, 150);
});

Answer 1

更新：我已更新此内容以回应您的评论。似乎您的滑块代码在运行后会修改原始 html 结构，因此您无法再次重新运行代码。下面的解决方案制作了原始 html 的备份副本。在重新运行滑块代码之前，将滑块 html 恢复为原始状态，然后重新运行代码。

请注意，当滑块被删除并重新创建时，这可能会导致某种闪烁。如果您确保在 css 中为父元素指定固定高度（如下所示的幻灯片包装器），则可以避免这种情况。

• 创建一个新的隐藏 div，您将在其中放置备份 html。比如：

<div id="slideshow-backup" style="display:none;"></div>

• 将现有的展示 div 放入包装器中。我们将在重新创建幻灯片 html 时使用它：

<div id="slideshow-wrapper" style="height: 800px">
    <div id="slideshow">
    ...
    </div>
</div>

• 您需要创建一个用于放置幻灯片代码的函数。您在文档准备好时调用它一次，并设置在调整窗口大小时调用相同的函数：

function show_slider() {
    $("#showcase").awShowcase({
        content_height: 640
        // deleted the rest of the options for clarity...
    });
}

$(document).ready(function() {
    // make a backup copy of the original showcase div, and change its id to showcase-orig
    $('#showcase').clone().appendTo('#slideshow-backup').attr('id', 'showcase-orig');

    show_slider();

    var resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            // delete the modified showcase div
            $('#showcase').remove();
            // create a fresh copy of the slideshow from the backup div
            $('#showcase-orig').clone().appendTo('#showcase-wrapper').attr('id', 'showcase')

            // restart the slideshow
            show_slider();            
        }, 150);
    });

});​