jquery - 在调整大小时破坏 jQuery Supersized

Question

我在响应式网站中使用 Supersized 时遇到问题。如果窗口宽度低于 480px，则应该销毁 Supersized。如果我再次调整它的大小以使窗口宽度大于 480 像素，则应该重新初始化 Supersized。我有这个代码：

$(document).ready(function() {
        var newWindowWidth = $(window).width();
        if(newWindowWidth < 480){
            $("#supersized").remove();
        } else {
            $.supersized({
                slides: [{ image: 'images/bg.jpg', title: ''}]
            });
        }
    });
    $(window).resize(function() {
        var newWindowWidth = $(window).width();
        if(newWindowWidth < 480){
            $("#supersized").remove();
        } else {
            /*var loadSupersizedDiv = jQuery('<div id="supersized"></div>').appendTo(document.body);*/
            $.supersized({
                slides: [{ image: 'images/bg.jpg', title: ''}]
            });
        }
    });

我知道这并不完美，但我现在遇到的问题是，超大的 div 会随着调整大小的每个像素而自我复制。有没有解决的办法？

谢谢！

Answer 1

您必须检查是否已经加载了超大尺寸，如果没有则加载。现在它会在每次调整大小时加载。

$(window).resize(function() {
    var newWindowWidth = $(window).width();
    if(newWindowWidth < 480){
        $("#supersized").remove();
    } else if ($("#supersized").length == 0 && newWindowWidth > 480) {
        var loadSupersizedDiv = jQuery('<div id="supersized"></div>').appendTo(document.body);

        $.supersized({
            slides: [{ image: 'kazvan-1.jpg', title: ''}]
        });
    }
});

好的，对其进行了测试，基本上它所做的只是检查#supersized 是否已经存在，然后不创建新的。

Answer 2

您可以尝试使用$("#supersized").width(x)or$("#supersized").css('width', x + 'px')代替删除和重新创建元素。