Automatyczne odświeżanie diva nie działa

Question

Witam. Piszę stronę z chatem i mam problem z odświeżaniem diva, w którym znajdują się rezultaty z bazy danych - wiadomości. Dodałem taki kod:

<script>
        $(document).ready(function(){
        setInterval(function(){
        $("#conversation").load('load.php')
        }, 10000);
        });
    </script>

gdzie conversation to id mojego diva a w pliku load.php znajduję się zawartość tego diva. Strona zaczyna nie wiem dlaczego strasznie laguje całą przeglądarkę a sam div się nie odświeża. Da się to jakoś rozwiązać? Mam nadzieję, że nie podałem zbyt mało kodu.

Comments

Czy w konsoli są jakieś błędy? Czy request do load.php prawidłowo zwraca odpowiedź?

Co do wieszania, podałeś zbyt mało informacji: czy na stronie są na początku wykonywane jakieś wymagające operacje np. pętle, interwały w bardzo krótkich odstępach czasowych, skomplikowane animacje, może ładowane jest sporo obrazków? Czy ten sam problem występuje w innej przeglądarce?

---

Tak, odpowiedź z load.php jest zwracana prawidłowo a w konsoli nie ma błędów. W programie nie ma żadnych pętli, animacji, obrazków. Jedyne co robię, to łączenie się z bazą, co wcześniej nie powodowało żadnych problemów. W samej bazie nic nie zmieniałem, nawet liczba rekordów jest podobna.

Answer 1

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

Dokument zostaje załadowany, ale nie oznacza to że załadowane zostają jego elementy. Stąd może być sytuacja, gdzie skrypt próbuje się odwołać do elementu który nie w pełni jest gotowy. spróbuj zamienić to na onload  

Główne punkty dotyczące $ (document) .ready ():

Nie będzie czekać na załadowanie obrazów. Służy do wykonywania JavaScript, gdy DOM jest całkowicie załadowany. Tutaj umieść programy obsługi zdarzeń. Może być używany wielokrotnie. Zastąp $ jQuery, gdy pojawi się komunikat „$ nie jest zdefiniowany”. Nieużywane, jeśli chcesz manipulować obrazami. Zamiast tego użyj $ (window) .load ().

Comments

Dokument zostaje załadowany, ale nie oznacza to że załadowane zostają jego elementy. Stąd może być sytuacja, gdzie skrypt próbuje się odwołać do elementu który nie w pełni jest gotowy. spróbuj zamienić to na onload

Nie trzeba czekać na load event, gdy potrzebuje się mieć dostęp do elementów w DOM. Wystarczy jQuery.ready lub DOM'owy event DOMContentLoaded (przy założeniu, że skrypt umieszczony jest przed elementem, do którego chcemy mieć dostęp i nie zawiera atrybutu defer). Event load odpala się później i oznacza załadowanie zewnętrznych zasobów, np. dostęp do elementu <img> w DOM będzie możliwy przy jQuery.ready / DOMContentLoaded, ale sama zawartość obrazka będzie się jeszcze ładować i to można złapać podpinając się na load event bezpośrednio na samym obrazku, albo czekając na load event na obiekcie window - wtedy obrazki, CSSy, skrypty na stronie są załadowane.

---

Jak mogłoby wyglądać w takim razie odświeżanie diva? Dopiero zaczynam programować w js i nie za bardzo orientuje się o co z tym chodzi...

---

Co konkretnie zwraca request do load.php? Wywołaj .load z callbackiem i pokaż co rzuci console.log:

$("#conversation").load('load.php', function(responseText, textStatus) {
  console.log('responseText: ', responseText, ' /textStatus: ', textStatus);
});

Upewnij się też, że selektor elementu jest prawidłowy i że ten element znajduje się w DOM w momencie wywołania .load.