2012-12-30 11 views
5

Gdy strona ładuje się po raz pierwszy, nakłada się na siebie obrazy, a po odświeżeniu strony zaczyna działać poprawnie. Nie mam pojęcia, co zrobiłem źle. mój link do strony jest to www.bhinderblink.comPo odświeżeniu strony murowanie działa poprawnie, ale po raz pierwszy zachodzi na siebie

<script type="text/javascript"> 
    $(window).load(function() { 
     $('#container').masonry({ 
      // options 
      itemSelector: '.box', 
      columnWidth: 240, 
      isAnimated: true, 
      isFitWidth: true, 
      animationOptions: { 
       duration: 650, 
       easing: 'linear', 
       queue: false 
      } 
     }); 
    }); 


</script> 

Na Sukces .ajax, pobierał dane z XMLObject ...

function OnSuccess(response) { 
     var xmlDoc = $.parseXML(response.d); 
     var xml = $(xmlDoc); 

     pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text()); 

     var pic_infoVar = xml.find("pic_info"); 

     pic_infoVar.each(function() { 
      var customer = $(this); 
      //........... 

      var $picString = $("<div class='box'><img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/><div>Detail2</div></div>"); 
      $("#container").append($picString).masonry('appended', $picString, true); 

     }); 

     $("#imgloader").hide(); 
     $("body").css({ "opacity": "100" }); 
    } 
+0

Sprawdziłem link i wszystko wygląda OK. Spróbuj wyczyścić/wyłączyć pamięć podręczną w przeglądarce – stefanz

+0

działa dobrze 2 razy na 20. najpierw całkowicie zamknij stronę i spróbuj ponownie ją otworzyć 2 3 razy, a zauważysz, że podczas przewijania w dół 15 kolejnych zdjęć na okrążeniach. ale jeśli odświeżysz otwartą stronę, załadujesz zdjęcia doskonale –

+0

Nie jestem pewien, gdzie jest problem, ale po raz pierwszy musisz rozwiązać problem wyświetlany w konsoli: http://img822.imageshack.us/img822/9118/2012123017h2815.jpg. – stefanz

Odpowiedz

10

ja też ma podobny problem, obrazy były nakładających u pierwszy czas ładowania. Pokonałem to przez najpierw ładując obrazy.

Jeśli obrazy są wczytywane, to tylko obowiązek murarski musi się rozpocząć. Powinien działać dobrze.

1

Dzieje się tak, ponieważ skrypt jest uruchamiany, zanim zawartość (obrazy) nie jest w pełni załadowana. Stąd błąd pozycjonowania.

Spróbuj tego: -

<head> 
<script> 
     $(window).load(function(){ 
      $('#selector').masonry({ 
       itemSelector : '.item', 
       columnWidth : 200, 
       isAnimated: true, 
       animationOptions: { 
        duration: 700, 
        easing: 'linear', 
        queue: false 
       } 
      }); 
     }); 
</script> 
</head> 
Powiązane problemy