在调整大小时销毁jQuery Supersized

Question

我在一个响应式网站中使用Supersized遇到了问题。如果窗口宽度小于480px，则应销毁Supersized。如果我再次调整它的大小，使窗口宽度大于480px，那么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

您必须检查supersized是否已加载，如果未加载，则加载。现在，每次调整大小时都会加载。

$(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)或$("#supersized").css('width', x + 'px')，而不是删除和重新创建元素。