Forum PHP.pl > [AJAX][PHP]preloader

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX][PHP]preloader - dobrze?

kamilo818

23.07.2014, 20:58:08

Zerknijcie:

[PHP] pobierz, plaintext 
<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" src="http:///js/jquery.cycle.all.js"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
		<meta charset="" />
		<meta name="author" content="" />
		<title>Preloader</title>
		<script type="text/javascript">
			$(document).ready(function() {
				$.ajax({
 
					url : ('index.php'),
					beforeSend : function() {
						$('.loader').show();		
					},
					success : function(obj) {
						window.setTimeout(function () { 
							$('.loader').fadeOut();
								window.setTimeout(function () {
								$('body').html(obj);}, 500);
						}, 2000);
					},
				});
			});
		</script>
	</head>
	<body>
		<div class="loader" style="display: none; margin-top:150px;"><img src="490.GIF"/><br><img src="289.GIF"/></div>
	</body>
</html>
[PHP] pobierz, plaintext

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

trueblue

23.07.2014, 21:09:23

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.

kamilo818

23.07.2014, 21:15:37

Jeszcze raz tylko wolniej proszę. Sorry ale nie załamałem

trueblue

23.07.2014, 21:24:45

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.

kamilo818

23.07.2014, 21:51:48

Coś takiego?

[PHP] pobierz, plaintext 
$("img").load(function() {
 
				  window.setTimeout(function () {
								$('.loader').slideUp();}, 3000);
				}).each(function() {
				  if(this.complete) $(this).load();
				});
[PHP] pobierz, plaintext

[HTML] pobierz, plaintext 
<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

trueblue

24.07.2014, 11:25:15

[HTML] pobierz, plaintext 
var images=$('img');
var count=0;
for(var i=0;i<images.length;i++){
	var img=document.createElement('img');
	img.onload=function(){
		count++;
		if(count==images.length){
			//tu ajax na success $('.loader').remove();
		}
	}
	img.src=$(images[i]).attr('src');
}
[HTML] pobierz, plaintext

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.