Discussion :

[erehcab]

Bonjour à tous,
j'aimerai créer une barre de progression utilisant progress bar de jquery ui permettant d'afficher à l'utilisateur le pourcentage restant avant que tout les éléments de la page soient chargés. J'ai mis en place une ébauche mais ça ne fonctionne pas vraiment du moins j'ai l'impression. Je précise que je travail avec Wordpress. Voici ce que j'ai réalisé pour le moment :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<?php
get_header(); ?>
<?php 
        $query_images_args = array('post_type' => 'attachment', 'post_mime_type' =>'image', 'post_status' => 'inherit', 'posts_per_page' => -1);
        $query_images = new WP_Query( $query_images_args );
?>
<div id="content">
	<div id="home">
		<a href="<?php bloginfo('url'); ?>/projet/" title="<?php _e( 'Accéder au site.', 'horizonvertical' ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt="" /></a>
	</div>
</div>
<?php get_footer(); ?>
<script type="text/javascript">
	var loader_home = '<div id="load_home"><div id="progressbar"></div><p class="loader_text">loading, please wait.</p></div>';
	$('body').prepend(loader_home);
	var images = new Array();
	var nbImages = <?php echo count($query_images->posts); ?>;
	var imagesPercent = 100 / images;
	var valueBar = 0;
	$('#progressbar').progressbar({
		value:valueBar
	});
	<?php
                $i = 0;
                foreach ( $query_images->posts as $image) {
                        ?>
				images[<?php echo $i; ?>] = "<?php echo      wp_get_attachment_url( $image->ID ); ?>"; 
			<?php
                        $i++;
                }
        ?>
	$(window).load(function(){ 
		for (i=0; i<= images.length; i++)
		{
			$(new Image()).attr('src', images[i]).load( function() { 
				valueBar = valueBar + imagesPercent;
				$('#progressbar').progressbar({ value:valueBar });				
			});	
		}
	});
</script>

Si quelqu'un veut bien y jeter un œil et me dire ce qu'il en pense.

[danielhagnoul]

Bonsoir

Je ne peux rien tester avec du code PHP, il faut donner une copie du code traiter par le navigateur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var images = new Array();
 
var imagesPercent = 100 / images;

Une division par un Array ? Drôle de pourcentage !

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(window).load(function(){...});

C'est quoi l'intérêt d'indiquer la progression de chargement une fois que toute la page est chargée ?

[ABCIWEB]

A propos du .load de jquery sur une image j'ai lu que

You need to be careful when using the load event for images since if the image is found in the browser's cache IE and (I am told) Chrome will not fire the event as expected.

Du coup bien qu'utilisant jquery j'utilise toujours le img.complete de javascript.
Y a-t-il un intérêt particulier d'utiliser la fonction load de jquery sur une image plutôt que le classique img.complete ?

[erehcab]

Bonjour, merci pour vos réponses.
Désolé pour le PHP je voulais juste montrer le contexte et avoir un avis sur la méthode. Ok pour le $(window).load et merci pour le calcul du pourcentage, erreurs d'inattentions ... Je re fais des tests en corrigeant tout ça.

[erehcab]

Bonjour ABCIWEB,
peux tu me montrer comment tu utilises img.complete ?

[ABCIWEB]

Bonjour ABCIWEB,
peux tu me montrer comment tu utilises img.complete ?

Tu fais un tableau de tes images avec new Image(). Ensuite tu liste ton tableau à intervals réguliers par exemple avec setInterval, et tu teste pour chaque image si elle est chargée avec .complete.

Tu trouveras d'autres infos sur ce lien qui renvoie au topic où j'ai trouvé la citation plus haut.

Après y'a mille variantes, par exemple comme dans ce lien (que tu peux retrouver par l'intermédiaire des liens dans ma signature) où tu constate que je dois vérifier le chargement de l'image avant de faire un fondu vers l'image précédente ou suivante puis faire défiler l'image panoramique.
Ensuite si tu regarde le code source de la fonction défilante, tu constateras qu'à l'époque je n'avais pas encore adopté jquery et que je ne connaissais pas prototype ce qui fait que le code est à base de tableaux et donne un code assez indigeste à lire. Mais bon comme elle est terminée, qu'elle marche correctement et que je n'envisage pas d'évolution dans son fonctionnement, je ne vais certainement pas la refaire pour juste faire plus beau dans le code

[erehcab]

Merci ABCIWEB la solution vu sur Stackoverflow me convient parfaitement.
Je test ça ce matin.