Aktualizacja Dlatego nie używam zapytania multimedialne: Witryna jest witryną paralakcyjną, która ma około 60-70 pojedynczych obrazów, które są animowane w każdym div. Pierwotnie kodowałem witrynę za pomocą prostych zapytań multimedialnych, ale to się skończyło, nie działa, ponieważ strona obciążyłaby bardzo wolno na połączeniu 3G. Teraz, co robię, to stworzyłem 5 zrzutów ekranu ze wszystkimi elementami w swoich ostatecznych pozycjach i domyślnie ustawiam te obrazy tła dla Div. Następnie, jeśli zostanie wykryty, że szerokość ekranu jest powyżej 1100px (zakładając szybsze połączenie internetowe) Usunie obrazy tła i dołącz wszystkie pojedyncze aktywa w obrębie Div. (Daj mi znać, jeśli jest lepszy sposób na osiągnięcie tego).

Mam witrynę paralaksy, która korzysta z jQuery do dołączenia elementów do slajdu divs, jeśli szerokość przeglądarki wynosi 1100px lub więcej, a inna funkcja opróżnia te Divs, jeśli okno jest zmieniane mniejsze niż 1100px. Próbuję to ustawić, aby elementy były dołączane i puste automatycznie, gdy przeglądarka zostanie zmieniony. Oto przykład funkcji dołączenia:

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

A oto przykład pustej funkcji:

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

Dodałem funkcję EmptyContainers do zdarzenia zmiany rozmiaru:

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

Działa to tak, jak powinno, jeśli zacząłem z mojej przeglądarki na szerokości 1100+ px, prawidłowo pokazuje załączone aktywa, a następnie, jeśli zmienić rozmiar przeglądarki poniżej 1100, usuwa aktywa z pojemników. Problem z powrotem w drugą stronę. Jeśli spróbuję zmienić rozmiar od poniżej 1100 z powrotem do powyżej 1100 elementy nie są ponownie dołączane.

Próbowałem dodać funkcję Appendelements do zdarzenia zmiany rozmiaru, ale spowodowało, że wszystkie elementy do powielania, aby były wiele instancji każdego elementu na stronie.

Jakieś pomysły? Z góry dziękuję!

0
APAD1 27 listopad 2013, 02:20

3 odpowiedzi

Najlepsza odpowiedź

Po usunięciu pojemników ustaw flagę boolowską na true, i false, gdy dodasz je z powrotem. Podczas gdy poniższy będzie działać, gdy zapytałeś, zdecydowanie polecam czyste zapytania medialne, gdzie są wykonalne. Są one znacznie czystszym rozwiązaniem.

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();  
}
1
Wyatt 26 listopad 2013, 22:30

Spróbuj dodać linię do kodu, aby sprawdzić, czy element istnieje. Jeśli go nie dodaj. Jeśli to nic nie robi.

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

Zapytania medialne są tu oczywistą odpowiedzią, ale skomentował o unikaniu zapytań medialnych.

2
DutGRIFF 26 listopad 2013, 22:39

Podobnie jak doorknob mówi, że najlepszy sposób może być z czystymi zapytaniami mediów. Nie zmieniaj dom w ogóle, wybierz liczbę wyświetlania na podstawie szerokości ekranu.

Coś jak

#bg_container bg_images {
    display: none;
  }

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

Nawet lepiej możesz wybrać, ile pokazujesz na podstawie rozmiaru

#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;
  }
}
0
Dan Baker 26 listopad 2013, 22:36