jQuery追加功能和调整大小答案

【问题标题】：jQuery append function and resizingjQuery追加功能和调整大小
【发布时间】：2013-12-02 04:09:48
【问题描述】：

我正在尝试我的第一个“渐进式增强”站点，并且对 jQuery 追加和浏览器大小调整有疑问。基本上，我将其设置为加载的默认站点是移动版本，然后如果浏览器宽度至少为 1100 像素，我有一个 jQuery 函数可以将桌面元素附加到页面上的 div。

效果很好，但现在我只需要解决调整大小的问题。目前，如果您将浏览器窗口的大小调整为低于 1100 像素宽度，则附加到 div 的元素不会消失，直到您刷新浏览器。我想这样做，如果浏览器窗口的大小调整到 1100px 以下，附加的元素会在不刷新的情况下消失。

有人能指出我正确的方向吗？谢谢！

HTML：

<div id="section1">

</div>

Javascript：

if (window.matchMedia("(min-width: 1100px)").matches) {
    $("#section1").append("\
        <div class='placeholder'>\
            <img src='assets/site/desktop_placeholder.png' />\
        </div>\
    ");
}

【问题讨论】：

您想完全删除它们，还是仅仅隐藏它们？
我可能会使用 css 媒体查询，但您也可以使用 resize event。
我认为您需要处理调整大小事件。查看以下stackoverflow.com/questions/641857/…
您应该使用 CSS3 媒体查询来处理元素的可见性。即使它们不是第一次存在。
对不起，最初应该更清楚。我使用 append 的原因是因为对于桌面站点，将需要加载大约 70-100 个元素，而我根本不希望它们在站点的移动版本上加载。基本上它是一个视差站点，对于移动版本，我将截取元素在其最终位置的屏幕截图并将它们设置为部分 DIV 的背景图像，以便在移动版本上仅加载 5 张图像（每个部分一个）而不是单独加载所有 70-100 个元素并隐藏它们。

标签： javascript jquery resize append matchmedia

【解决方案1】：

我一直在玩它，我想我已经接近了。让我知道是否有更好的方法来执行此操作，或者您是否发现此代码有任何问题。谢谢！

function appendElements() {
    //swap in desktop content
    if (window.matchMedia("(min-width: 1100px)").matches) {
        $("#section1").append("\
            <div class='placeholder'>\
                <img src='assets/site/desktop_placeholder.png' />\
            </div>\
        ");
    }
    }else{
        $("#section1").empty();
    }
}

if (window.matchMedia("(min-width: 1100px)").matches) {
    appendElements();
}

$(window).resize(function(){
    appendElements();    
});

【讨论】：