Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX][PHP]preloader - dobrze?
kamilo818
post 23.07.2014, 20:58:08
Post #1





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

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

Zerknijcie:

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.  
  6. 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  7. 		<script type="text/javascript" src="http:///js/jquery.cycle.all.js"></script>
  8. 		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  9. 		<meta charset="" />
  10. 		<meta name="author" content="" />
  11. 		<title>Preloader</title>
  12. 		<script type="text/javascript">
  13. 			$(document).ready(function() {
  14. 				$.ajax({
  15.  
  16. 					url : ('index.php'),
  17. 					beforeSend : function() {
  18. 						$('.loader').show();		
  19. 					},
  20. 					success : function(obj) {
  21. 						window.setTimeout(function () { 
  22. 							$('.loader').fadeOut();
  23. 								window.setTimeout(function () {
  24. 								$('body').html(obj);}, 500);
  25. 						}, 2000);
  26. 					},
  27. 				});
  28. 			});
  29. 		</script>
  30. 	</head>
  31. 	<body>
  32. 		<div class="loader" style="display: none; margin-top:150px;"><img src="490.GIF"/><br><img src="289.GIF"/></div>
  33. 	</body>
  34. </html>
[PHP] pobierz, plaintext


Zadziała to jak preloader? Czyli bedzie sie pokazywał obrazek zanim sie wczyta cała strona?

Ten post edytował kamilo818 23.07.2014, 20:58:39
Go to the top of the page
+Quote Post
trueblue
post 23.07.2014, 21:09:23
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

Niekoniecznie, najpierw powinieneś preloadować obrazek do preloadera, potem wywołać ajaxa.
Natomiast nie wiem dlaczego podchodzisz do całości tego zagadnienia od...tyłu.

Ten post edytował trueblue 23.07.2014, 21:09:52


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
kamilo818
post 23.07.2014, 21:15:37
Post #3





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

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

Jeszcze raz tylko wolniej proszę. Sorry ale nie załamałem
Go to the top of the page
+Quote Post
trueblue
post 23.07.2014, 21:24:45
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

Najpierw ładujesz obrazek i czekasz na załadowanie: http://stackoverflow.com/a/3537471
Potem wywołujesz ajaxa.

Natomiast, nie powinieneś ładować treści całej strony w ajaxie tylko umieścić ją od razu bezpośrednio w kodzie, bo:
1. Będzie słaba albo wręcz nie będzie indeksacji przez roboty
2. [u]Nie masz zapewnionej w 100% sytuacji[/u], że metoda success ajaxa wywoła się po załadowaniu obrazków zawartych w index.php (a być może tego oczekujesz po ajaxie).

Jeśli chcesz zrobić preloader dla obrazków, powinieneś ustawić warstwę nad całością strony (div fixed background-image lub <img>), sparsować całą stronę pod kątem atrybutu src dla <img> i/lub sparsować css pod względem background-image, oprogramować ich ładowanie, po załadowaniu wszystkich, zniszczyć/schować warstwę z preloaderem.

Ten post edytował trueblue 23.07.2014, 21:25:40


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
kamilo818
post 23.07.2014, 21:51:48
Post #5





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

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

Coś takiego?
[PHP] pobierz, plaintext 
  1. $("img").load(function() {
  2.  
  3. 				  window.setTimeout(function () {
  4. 								$('.loader').slideUp();}, 3000);
  5. 				}).each(function() {
  6. 				  if(this.complete) $(this).load();
  7. 				});
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <div class="loader" style="position:fixed;top:0;left:0;width:100%;height:100%;background:white;z-index:999999999; padding-top:150px;"><img src="490.GIF"/><br><img src="289.GIF"/></div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
trueblue
post 24.07.2014, 11:25:15
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

[HTML] pobierz, plaintext 
  1. var images=$('img');
  2. var count=0;
  3. for(var i=0;i<images.length;i++){
  4. 	var img=document.createElement('img');
  5. 	img.onload=function(){
  6. 		count++;
  7. 		if(count==images.length){
  8. 			//tu ajax na success $('.loader').remove();
  9. 		}
  10. 	}
  11. 	img.src=$(images[i]).attr('src');
  12. }
[HTML] pobierz, plaintext


Ten post edytował trueblue 24.07.2014, 11:25:26


--------------------
https://kawalekkodu.pl
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 Wersja Lo-Fi Aktualny czas: 19.07.2025 - 08:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn