Image de loading au chargement avec get()

Bonjour,

j'ai un petit souci, je ne vois pas comment faire en sorte d'avoir une image de loading et afficher ma page seulement lorsqu'elle a fini de charger (à l'aide de get()).

Code:

---

1 2 3

function getCurrentUrl() { $($.get("page1.html", function (data {$("#divchargement").empty().append(data);},'html')); }

---

Je sais que ce n'est pas bien sorcier mais je m'emmêle les pinceaux...

Merci si quelqu'un pouvait m'aider. ;)

Bonjour,

Avant l'appel du "GET" tu affiches un "Loader" et au "complete" tu le caches (pareil si erreur ou autre).

http://api.jquery.com/jQuery.get/

Code:

---

1 2 3 4 5 6 7 8 9

function getCurrentUrl() { $(".loader").show(); $($.get("page1.html", function (data {$("#divchargement").empty().append(data);},'html')) .success(function() { alert("second success"); }) .error(function() { $(".loader").hide(); }) .complete(function() { $(".loader").hide(); }); }

---

Cordialement.

NB : ne pas oublier de le cacher en cas d'erreur sinon le loader restera affiché indéfiniment.

Merci Beaucoup PP,

Je vais étudier ça. ;)

Bonjour,
j'ai finalement un petit souci :

d'abord j'ai modifié le code car il ne fonctionnait pas, à cause d'une parenthèse mal placée :

Code:

---

1 2 3 4 5 6 7 8

function getCurrentUrl() { $("#loader").show(); $($.get("page1.html", function (data) {$("#divchargement").empty().append(data);},'html') .success(function() { alert("second success"); }) .error(function() { $("#loader").hide(); }) .complete(function() { $("#loader").hide(); }) ); }

---

ce code semble fonctionner puisque l'alerte fonctionne et le loader se hide.

aussi, mon loader est une id et non une classe dans mon cas.

Hors j'ai un petit souci :

Lorsque je charge ma page (contenant 4 ou 5 images jpg), les images ne sont pas chargées que la page apparait, et ensuite les images se chargent une à une.

je voudrais que l'ensemble des images se chargent, et qu'ensuite la page apparaisse...
Est-ce possible ?

Ou sinon autre question, afin de trouver une solution alternative :

j'ai donc dans ma page qui se load des images. (voir code).
y aurait-il une manière alternative pour charger chaque image avec un loading ?
un peu comme tu m'as montré dans le code précédent.

Code:

---

1 2 3 4 5

<div id="contenu"> <div id="imprj01"><img src="im01.jpg"/></div> <div id="imprj02"><img src="im02.jpg"/></div> <div id="imprj03"><img src="im04.jpg"/></div> </div>

---

Sinon (mais là c'est encore plus prise de tête) comment faire en sorte qu'elles se chargent dans l'ordre avec ce système de loading ?


merci bcp de ton aide en tout cas :)