Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][MySQL]Ładowanie danych z bazy do divów
kamilo818
post
Post #1





Grupa: Zarejestrowani
Postów: 250
Pomógł: 11
Dołączył: 20.01.2014

Ostrzeżenie: (0%)
-----

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ź
Go to the top of the page
+Quote Post
timon27
post
Post #2





Grupa: Zarejestrowani
Postów: 578
Pomógł: 69
Dołączył: 15.04.2007
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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?
[HTML] pobierz, plaintext 
  1. for(var i=0;i<c;i++) ajax('div'+i);
[HTML] pobierz, plaintext



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?

Ten post edytował timon27 11.02.2014, 23:25:18
Go to the top of the page
+Quote Post
kamilo818
post
Post #3





Grupa: Zarejestrowani
Postów: 250
Pomógł: 11
Dołączył: 20.01.2014

Ostrzeżenie: (0%)
-----

2. to nie tylko text to również zdjęcie.

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

[PHP] pobierz, plaintext 
  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. ?>                                       
[PHP] pobierz, plaintext


Poprawnie? Czy da się jakoś to zoptymalizować?

Ten post edytował kamilo818 12.02.2014, 08:50:39
Go to the top of the page
+Quote Post
timon27
post
Post #4





Grupa: Zarejestrowani
Postów: 578
Pomógł: 69
Dołączył: 15.04.2007
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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:
[PHP] pobierz, plaintext 
  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. }
[PHP] pobierz, plaintext


Ten post edytował timon27 12.02.2014, 16:04:48
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 10:54
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn