Barre de progression du contenu chargé
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:
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.
