Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][MySQL]Ładowanie danych z bazy do divów
Forum PHP.pl > Forum > Przedszkole
kamilo818
Witam,
mam pewien problem.
Z bazy danych dane łądowane są na stronie do divów. Chciałbym żeby przed załadowaniem się treści pojawiał się preloader.
Myślałem żeby do tego użyć ajaxa ale tutaj pojawił się problem jak to wrzucić w petle i przekazywać pobrane w petli dane z bazy?
Może jest inny sposób żeby osiągnać ten cel?

Poproszę o podpowiedź
timon27
1. Zależy od struktury.
Jeśli divy są takie same i możesz je ponumerować, to czemu nie.
W javascript w pętli będziesz wczytywał kolejne ajaxem.
Z czym masz problem?
  1. for(var i=0;i<c;i++) ajax('div'+i);



2. Czy to konieczne?
Dane to tekst.
Nawet jeśli zamieściłbyś cały tekst Biblii, to źródło jest na tyle małe, że preloader jest zbędny.
Jeśli tekstu jest więcej, to: kto to przeczyta?
kamilo818
2. to nie tylko text to również zdjęcie.

Udało mi się zrobić coś takiego:

  1. <script>
  2. $(document).ready(function() {
  3.  
  4. for(var i=0;i<5;i++){
  5. var image = $('div#'+i).attr('image');
  6. var title = $('div#'+i).attr('title');
  7. var content = $('div#'+i).attr('content');
  8. var link = $('div#'+i).attr('link');
  9.  
  10.  
  11. $.ajax({
  12.  
  13. beforeSend: function(){
  14.  
  15. $('div.view').html("<center><img src='./495.GIF'></center>");
  16.  
  17. },
  18. success: function(){
  19. $('div.view').html(" <img src='"+image+"' /><div class='mask'><h2>"+title+"</h2><p>"+content+"</p><a href='"+link+"' class='info' target='_blank'>Test It</a></div>");
  20.  
  21. }
  22.  
  23. });
  24.  
  25. }
  26.  
  27. });
  28. </script>
  29.  
  30.  
  31. <?php
  32. require_once ('../functions.php');
  33. connect($adres, $user, $pass, $baza);
  34.  
  35.  
  36. $zapytanie = "SELECT * FROM `example` ";
  37. $wynik = mysql_query($zapytanie);
  38. $i=0;
  39.  
  40.  
  41.  
  42. while ($row = mysql_fetch_row($wynik)) {
  43.  
  44. echo "
  45.  
  46. <div class='view view-first' id='".$i."' image='".$row[1]."' title='".$row[2]."' content='".nl2br($row[3])."' link='".$row[4]."'>
  47.  
  48. </div>
  49.  
  50. ";
  51. $i++;
  52. };
  53.  
  54.  
  55.  
  56. koniec($adres, $user, $pass);
  57. ?>


Poprawnie? Czy da się jakoś to zoptymalizować?
timon27
Nie wiem. Sprawdź.

Ta 5 w pętli to tymczasowo?, a potem będzie liczone w setkach? Bo jeśli taka jest ilość divów to sobie daruj.

Generalnie twoim pomysłem strona będzie się rozrastać przy wczytywaniu, co będzie psuć rozłożenie elementów oraz wrażenia estetyczne.
Tak jak mówiem tekst nie zajmuje miejsca. Ale widzę że masz zdjęcia i to one mogą powodować wolne wczytywania.
Dlatego proponuję ajaxować tylko zdjęcia, a wcześniej zamiast nich umieścić zdjęcie 'klepsydry'.


Jak mniej-więcej zrobić wczytywanie powolne obrazków:
  1. echo '
  2. <script>
  3. function loading(i){
  4. document.getElementById("id"+i).src=zdjecia[i];
  5. loading(i+1);
  6. }
  7. var zdjecia=Array(';
  8. while(...){
  9. echo "'".url_zdjęcia.'","
  10. }
  11. echo'");<script><body onload='loading(1)'>";
  12. while(...){
  13. echo '<img src=loading.gif id=id'.$id.'>';
  14. ...
  15. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.