javascript - 如何在调整大小时追加/删除元素而不重复它们

Question

更新 这就是我不使用媒体查询的原因:该网站是一个视差网站，每个 div 中都有大约 60-70 个独立的动画图像。最初我使用直接媒体查询对网站进行编码，但最终无法正常工作，因为该网站在 3G 连接上加载速度非常慢。现在我正在做的是创建 5 个屏幕截图，其中所有元素都处于最终位置，并且默认情况下我将它们设置为 div 的背景图像。然后，如果检测到屏幕宽度高于 1100px(假设互联网连接速度更快)，它将删除背景图像并在 div 中 append 所有单独的资源。 (如果有更好的方法来完成此任务，请告诉我)。

我有一个视差网站，如果浏览器宽度为 1100 像素或更大，则使用 jQuery 将元素 append 到幻灯片 div 中，如果窗口大小调整为小于 1100 像素，则使用另一个函数清空这些 div。我正在尝试进行设置，以便在调整浏览器大小时元素会自动追加和清空。以下是追加函数的示例:

function appendElements() {
    //swap in desktop content
    if (window.matchMedia("(min-width: 1100px)").matches) {
    jQuery("#bg_container").append("\
        <div id='BG' class='bg_images' data-stellar-ratio='.5'>\
            <img src='img/bg/bg1.png'/>\
        </div>\
    ");
}
appendElements();

这是空函数的示例:

function emptyContainers() {
    if (window.matchMedia("(max-width: 1099px)").matches) {
        jQuery("#bg_container").empty();
    }   
}

我将emptyContainers函数添加到调整大小事件中:

jQuery(window).resize(function(){
    emptyContainers();   
});

这是正常工作的，如果我从宽度为 1100+ px 的浏览器开始，它会正确显示 append 的资源，然后如果我将浏览器大小调整到 1100 以下，它会从容器中删除资源。问题是反过来。如果我尝试将大小从 1100 以下调整回 1100 以上，则不会重新 append 元素。

我也尝试将appendElements函数添加到resize事件中，但这会导致所有元素重复，从而导致页面上每个元素都有多个实例。

有什么想法吗？提前致谢!

Answer 1

尝试在代码中添加一行来检查该元素是否存在。如果没有则添加它。如果是这样，则什么都不做。

function appendElements() {
//swap in desktop content
if (window.matchMedia("(min-width: 1100px)").matches) {

  if($("#BG").length == 0){

    jQuery("#bg_container").append("\
      <div id='BG' class='bg_images' data-stellar-ratio='.5'>\
          <img src='img/bg/bg1.png'/>\
      </div>\
    ");

  }

}
appendElements();

媒体查询是这里显而易见的答案，但他发表了关于避免媒体查询的评论。