在 AJAX 调用之间销毁/重新加载 bxSlider？答案

【问题标题】：Destroy/Reload bxSlider between AJAX calls?在 AJAX 调用之间销毁/重新加载 bxSlider？
【发布时间】：2014-04-15 23:20:18
【问题描述】：

我的起始页有一个 bxSlider（全角布局）和一个围绕这个元素的包装器。

但是，当我点击通过 ajax 进入另一个页面时，我有一个 javascript 操作将重新加载滑块包装内容，因为我从 “1 个滑块全宽布局” 更改为 “2 个半角布局的滑块”

因此总共有 3 个滑块，但是如果您直接加载起始页，您只会看到 1 个。如果您直接加载另一个页面（没有 ajax），您会看到另外 2 个滑块。

我这样初始化滑块：

banner1 = $('#page_banner1').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 540,
    responsive: true,
    speed: 700,
    pause: 7500,
    auto: true
});

banner2 = $('#page_banner2').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 540,
    responsive: true,
    speed: 700,
    pause: 9500,
    auto: true
});

banner_full = $('#page_banner_full').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 1080,
    responsive: true,
    speed: 700,
    pause: 7500,
    auto: true
});

例如，在其中一个页面（不是起始页）上，banner1 和 banner2 是 bxSlider，但 banner_full 返回 NULL：

<div id="banner_wrapper" class="page_block">

    <div id="page_banner1" class="page_slider" style="display: none;">
        <div id="banner1_0">
            <img id="img_0" src="cats.png" border="0">
        </div>
        <div id="banner1_1">
            <img id="img_1" src="dogs.png" border="0">
        </div>
        <div id="banner1_2">
            <img id="img_2" src="fish.png" border="0">
        </div>
    </div>

    <div id="page_banner2" class="page_slider" style="display: none;">
        <div id="banner2_0">
            <img id="img_0" src="banana.png" border="0">
        </div>
        <div id="banner2_1">
            <img id="img_1" src="orange.png" border="0">
        </div>
        <div id="banner2_2">
            <img id="img_2" src="apple.png" border="0">
        </div>
    </div>

</div>

我想我需要将我的初始化代码分支到函数中？但不确定将其重新创建为我可以轻松调用的函数的最佳方法（我会检查 typeof slider !== 'undefined' 然后重新加载/销毁，否则运行初始化代码）。

我知道 bxSlider 支持加载动态内容...除了我实际上更改了完整内容 $('#banner_wrapper').html(data); 因为我使用不同的选项滑块（宽度等）。

这是完整滑块的 HTML：

<div id="banner_wrapper" class="page_block">

    <div id="page_banner_full" class="page_slider" style="display: none;">
        <div id="banner_full_0">
            <img id="img_0" src="football.png" border="0">
        </div>
        <div id="banner_full_1">
            <img id="img_1" src="rugby.png" border="0">
        </div>
        <div id="banner_full_2">
            <img id="img_2" src="basketball.png" border="0">
        </div>
    </div>

</div>

编辑：

好的，这就是我将初始化 bxSlider 代码分支到函数中所做的工作：

global_product.prototype.slider = function(elem, type, pause_time) {
    var slider_elem = $(elem);

    if(typeof(slider_elem) === 'undefined') {
        return false;
    }

    slider_elem.show();

    if(typeof(slider_elem.getSlideCount) !== 'function') {
        if(type === 'large') {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 1080,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        } else {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 540,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        }

        return slider_elem;
    } else {
        slider_elem.destroySlider();
    }

    return false;
};

global_product.prototype.sliderDestroy = function(elem) {
    var destroy_elem = $(elem);

    if(typeof(destroy_elem) === 'undefined') {
        return false;
    }

    if(typeof(destroy_elem.destroySlider) === 'function') {
        destroy_elem.destroySlider();
    }
};

global_product.prototype.reloadSlider = function(elem) {
    var reload_elem = $(elem);

    if(typeof(reload_elem) === 'undefined') {
        return false;
    }

    if(typeof(reload_elem.reloadSlider) === 'function') {
        reload_elem.reloadSlider();
    }
};

适用于：

global_product.prototype.slider_ajax = function(page) {

    banner1 = this.sliderDestroy('#page_banner1');
    banner2 = this.sliderDestroy('#page_banner2');
    banner_full = this.sliderDestroy('#page_banner_full');

    $.ajax({
        async: true,
        type: 'GET',
        url: page,
        success: $.proxy(function(data)
        {
            $('#partners').html(data);

            banner_banner1 = this.slider('#page_banner1', '', 7500);
            banner_banner2 = this.slider('#page_banner2', '', 9500);
            banner_full = this.slider('#page_banner_full', 'large', 7500);


        }, this)
    });

    this.reloadSlider('#page_banner1');
    this.reloadSlider('#page_banner2');
    this.reloadSlider('#page_banner_full');
};

但我无法“立即”销毁滑块？似乎要等到 bxSlider 先完成后再销毁它并加载另一个？

我想我应该在原型函数中使用“this”而不是“product”，但我认为这不是事情无法正常工作的真正原因吗？ -> 嗯，这似乎不起作用 - 'this' 没有定义

有什么想法吗？现在开始页面上的滑块可以工作，然后我单击并加载另一个页面，DOM 显示两个滑块，这两个滑块似乎已初始化为 bxSliders 但它们尚未启动并且它们不显示为可见？

啊，所以我确实必须将我的“产品”var 调用修复为原型中的“this”。代码已更新，现在运行良好...

【问题讨论】：

您应该将其发布为答案。

标签： jquery bxslider

【解决方案1】：

我在 EDIT 中修复了我的代码，但这是它的副本：

我创建了一个函数来初始化滑块，另一个尝试销毁滑块，另一个用于重新加载滑块。然后在我的 JS 函数中，我只是销毁、初始化、重新加载以确保一切正常......这可能会比我现在拥有的重构更多，但它似乎对我来说效果很好：

global_product.prototype.slider = function(elem, type, pause_time) {
    var slider_elem = $(elem);

    if(typeof(slider_elem) === 'undefined') {
        return false;
    }

    slider_elem.show();

    if(typeof(slider_elem.getSlideCount) !== 'function') {
        if(type === 'large') {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 1080,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        } else {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 540,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        }

        return slider_elem;
    } else {
        slider_elem.destroySlider();
    }

    return false;
};

global_product.prototype.sliderDestroy = function(elem) {
    var destroy_elem = $(elem);

    if(typeof(destroy_elem) === 'undefined') {
        return false;
    }

    if(typeof(destroy_elem.destroySlider) === 'function') {
        destroy_elem.destroySlider();
    }
};

global_product.prototype.reloadSlider = function(elem) {
    var reload_elem = $(elem);

    if(typeof(reload_elem) === 'undefined') {
        return false;
    }

    if(typeof(reload_elem.reloadSlider) === 'function') {
        reload_elem.reloadSlider();
    }
};

适用于：

global_product.prototype.slider_ajax = function(page) {

    banner1 = this.sliderDestroy('#page_banner1');
    banner2 = this.sliderDestroy('#page_banner2');
    banner_full = this.sliderDestroy('#page_banner_full');

    $.ajax({
        async: true,
        type: 'GET',
        url: page,
        success: $.proxy(function(data)
        {
            $('#partners').html(data);

            banner_banner1 = this.slider('#page_banner1', '', 7500);
            banner_banner2 = this.slider('#page_banner2', '', 9500);
            banner_full = this.slider('#page_banner_full', 'large', 7500);


        }, this)
    });

    this.reloadSlider('#page_banner1');
    this.reloadSlider('#page_banner2');
    this.reloadSlider('#page_banner_full');
};

【讨论】：