如何在不重複的情況下在調整大小時附加/刪除元素

UPDATE這就是爲什麼我沒有使用媒體查詢：該網站是一個視差網站，它具有大約60-70個獨立圖像，可在每個div內進行動畫處理。最初我使用直接媒體查詢編碼網站，但最終無法正常工作，因爲該網站在3G連接上的加載速度非常慢。現在我正在做的是我創建了5個截圖，其中包含所有元素的最終位置，並且我將這些截圖設置爲默認的div的背景圖像。然後，如果檢測到屏幕寬度超過1100px（假設網絡連接速度更快），它將刪除背景圖像並追加div內的所有單個資源。（讓我知道是否有更好的方法來實現這一點）。如何在不重複的情況下在調整大小時附加/刪除元素

我有一個視差網站，它使用jQuery將元素添加到幻燈片divs中，如果瀏覽器寬度爲1100px或更大，並且另一個函數在窗口大小小於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();

這裏是空的函數的例子：

我加入了emptyContainers功能resize事件：

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

如果我用我的瀏覽器以1100+ px的寬度開始，它正確地顯示附加的資產，然後如果我將瀏覽器的大小調整到1100以下，它將從容器中移除資產秒。問題正在以另一種方式迴歸。如果我嘗試從1100以下重新調整到1100以上，則不會重新添加這些元素。

我試着將appendElements函數添加到resize事件中，但是這導致所有元素都被重複，因此頁面上的每個元素都有多個實例。

任何想法？提前致謝！

來源

2013-11-26 APAD1

難道你不能只使用純CSS的媒體查詢？ – Doorknob

不，因爲頁面上需要加載的元素太多，我希望移動版本只加載5個元素在其最終位置的圖像，並將它們設置爲每個div的背景圖像，而不是加載所有元素然後隱藏它們。 – APAD1

當你取出容器，設置一個布爾標誌爲真，假，當你將它們添加回來。儘管下面的內容會按照您的要求工作，但我會在可行的情況下強烈推薦純媒體查詢。他們是一個更清潔的解決方案。

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(); 
}

來源

2013-11-26 22:30:34 Wyatt

感謝您的建議，當我回家時會給你一個鏡頭，讓你知道它是如何發生的。 – APAD1

這正是我工作的。我還必須添加「jQuery.stellar（'刷新'）;」到if（containersRemoved）語句，以便恆星重新初始化調整大小。謝謝！ – APAD1

像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; 
    } 
}

來源

2013-11-26 22:30:11

嘗試在代碼中添加一行以檢查元素是否存在。如果不是，則添加它。如果確實如此，則什麼都不做。

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();

媒體查詢在這裏是明顯的答案，但他對避免媒體查詢發表了評論。

來源

2013-11-26 22:33:38 DutGRIFF

謝謝你的建議，會給它一個機會！ – APAD1

如何在不重複的情況下在調整大小時附加/刪除元素

回答

相關問題