Chargement du site.

**Ciloe** · 02/07/2012, 10h54

Bonjour à tous!

Alors voilà mon problème: J'ai créé le de disgn de mon site avec pas mal d'image, seulement elle sont très lourdes... J'aimerais donc faire un système de loading, et afficher la page seulement quand elle a fini de charger.

Quel sont les moyen de le faire? (sachant que j'aimerais un loading qui évolue en fonction du % de chargement)

Y a t-il une fonction JS qui permet de de scinder le onload et le load?

Comment faire une annimation de loading?

Désolé pour toutes ces questions, mais je suis bien dans tous les languages web sauf le js xD.

Merci d'avance pour vos réponses.

**headmax** · 02/07/2012, 23h10

Salut en jquery (framework javascript) tu fais :
html

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
43
44
45
 
<html>
<head>
<style type="text/css">
ul#portfolio { margin:0; padding:0; }
ul#portfolio li { float:left; margin:0 5px 0 0; width:250px; height:250px; list-style:none; }
ul#portfolio li.loading { background: url(spinner.gif) no-repeat center center; }
</style>
<script>
// DOM ready
$(function () {
 
// image source en forme de tableau
var images = new Array();
	images[0] = 'http://farm4.static.flickr.com/3293/2805001285_4164179461_m.jpg';
	images[1] = 'http://farm4.static.flickr.com/3103/2801920553_656406f2dd_m.jpg';
	images[2] = 'http://farm4.static.flickr.com/3248/2802705514_b7a0ba55c9_m.jpg';
 
                        // on parcours tout les éléments li
			$("ul#portfolio li").each(function(index,el){
			// new image object
			        var img = new Image();
			// image onload
			        $(img).load(function () {
			// on cache les images en premier
			            $(this).css('display','none'); 
 
			            $(el).removeClass('loading').append(this);
			            $(this).fadeIn();
			        }).error(function () {
						$(el).remove();
			        }).attr('src', images[index]);
			});
 
		});
</script>
</head>
<body>
<ul id="portfolio">
<li class="loading"></li>
<li class="loading"></li>
<li class="loading"></li>
</ul>
</body>
</html>

Chargement du site.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager