Question

更新这就是我不使用媒体查询的原因：该网站是一个视差网站，每个div中有大约60-70个单独的图像。最初我使用直接媒体查询对网站进行编码，但最终无法正常工作，因为该网站在3G连接上加载速度极慢。现在我正在做的是我创建了5个屏幕截图，其中包含最终位置中的所有元素，我将这些设置为div的背景图像默认情况下。然后，如果检测到屏幕宽度高于1100px（假设互联网连接速度更快），它将删除背景图像并将所有单个资产附加到div中。（让我知道是否有更好的方法来实现这一目标。）

我有一个视差网站，如果浏览器宽度为1100px或更大，则使用jQuery将元素附加到幻灯片div中;如果窗口调整大小小于1100px，则使用另一个函数来清空这些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函数添加到resize事件：

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

这样可行，如果我的浏览器宽度为1100+ px，它会正确显示附加的资产，然后如果我将浏览器的大小调整到1100以下，它会从容器中删除资产。问题是回到另一个方向。如果我尝试从1100以下重新调整到1100以上，则不会重新附加元素。

我也尝试将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();

媒体查询是明显的答案，但他发表了关于避免媒体查询的评论。

Answer 2

删除容器时，将boolean标志设置为true，将其添加回false时设置为false。虽然以下内容可以按照您的要求运行，但我强烈建议在可行的情况下进行纯媒体查询。它们是一个更清洁的解决方案。

var containersRemoved = False;

jQuery(window).resize(function(){
  if (window.matchMedia("(min-width: 1100px)").matchescontainersRemoved) {
    if(containersRemoved){
      appendElements();
      containersRemoved = False;
    }
  }else{
     if(!containersRemoved){
       emptyContainers();
       containersRemoved = True;
     }
  }   
});

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

function emptyContainers() {
  jQuery("#bg_container").empty();  
}

Answer 3

像Doorknob说的最好的方式可能是纯媒体查询。根本不要改变dom，只需根据屏幕宽度选择显示的数量。

类似

#bg_container bg_images {
    display: none;
  }

@media all and (min-width: 1100px) {
  #bg_container bg_images {
    display: block;
  }
}

更好的是，您可以根据尺寸选择显示的数量

#bg_container bg_images {
    display: none;
  }
@media all and (min-width: 500px) {
  #bg_container bg_images:nth-child(-n+2){ // change 2 to howevermany you want
    display: block;
  }
}    
@media all and (min-width: 1100px) {
  #bg_container bg_images {
    display: block;
  }
}

如何在调整大小时附加/删除元素而不复制它们

3 个答案: