Prechargement

Chargement dans les images

Sujet résolu

17 janvier 2009 à 15:47:28

Bonjour,

Je souhaiterait afficher une image avec écrit "veuillez patientez ...", en attendant le chargement de 5 images.
Le problème, c'est que lors du chargement de la page, les 5 images en questions sont chargée donc l'image veuillez patienter ne s'affiche pas.

Comment faire pour que la page soit chargée mais sans les 5 images et que les images ne se charge qu'une fois la page affiché ?

Kyle Katarn

17 janvier 2009 à 16:58:37

Lors que la page est chargée :

window.onload=function () {
    // Actions à effectuer
}

Et pour charger l'image, il suffit de créer une balise img ou de changer le src. Par exemple, tu fais un petit gif pour le chargement, tu crées l'image reliée par src à ce gif et en javascript au chargement de la page tu change le src pour celui de l'image éventuellement préchargée en javascript avant.

Holowar | Carbon | Pug for PHP

Golmote

17 janvier 2009 à 20:26:54

Sinon tu mets tes 5 images en display:none, sauf celle de l'attente, que tu mets en premier (et que tu rends la plus légère possible (pour qu'elle charge vite)).

Et lors de l'événement onload, tu remets les images en display:inline.

SRL Killing

17 janvier 2009 à 20:45:14

Kyle c'est bien gentil mais je connais quand même ce genre de choses, mon script marche j'ai bien fait un addEventListener onload mais il me charge les images en même tant que la page.

Je précise que j'ajoute les images grâce au DOM.

Kyle Katarn

17 janvier 2009 à 21:16:15

onload ne peut s'utiliser que sur body et addEventListner est inutile ici. window.onload est la vraie méthode. Tu n'as plus qu'à placer ton DOM à la place du commentaire "// Actions à effectuer" du code ci-dessus et le tout dans une balise script.

Holowar | Carbon | Pug for PHP

SRL Killing

17 janvier 2009 à 21:39:09

Kyle, c'est pas la premiere fois que je code. Sinon addEventListener est pareil voir mieux que window.onload :

window.addEventListener("load", function(){ map.Init();}, false);

Timot

17 janvier 2009 à 21:55:15

Beh tu les créé avec l'objet Image qui est fait pour, et qui gère justement l'événement onload

Kyle Katarn

17 janvier 2009 à 22:48:45

En attendant, ce n'est pas moi qui ai des difficultés à précharger des images. Alors tu m'apprendras l'ECMAScript quand je viendrais demander de l'aide ici.

Holowar | Carbon | Pug for PHP

loderunner

17 janvier 2009 à 23:46:19

Euh juste une question :
A quoi sert-il de créer un onload avec addEventListener avec qu'on peut le mettre dans le body via un onload(), vu que ce onload ne sera fait qu'une fois le chargement de la page terminé ?

Kyle Katarn

18 janvier 2009 à 0:08:08

loderunner >
Vu le code, je pense que c'est pour le rendre incompatible avec IE.

Non, je pense qu'il a ajouté un code alternatif. Blague à part, il est d'abord intéressant de placer onload dans le javascript (qu'on place dans un fichier distant) plutôt que dans le html comme cela, ce qui n'activent pas le javascript ne chargent pas de code inutile. Tu gagnes aussi en lisibilité. Ensuite les deux codes suivants n'afficheront pas la même chose :

window.onload=function(){ document.write("1"); };
window.onload=function(){ document.write("2"); };

Affiche : 2

window.addEventListener("load", function(){ document.write("1");}, false);
window.addEventListener("load", function(){ document.write("2");}, false);

Affiche : 1
La priorité n'est pas la même. De plus addEventListener est une fonction propre au DOM du W3C spécifique aux évènements.

Holowar | Carbon | Pug for PHP

Golmote

18 janvier 2009 à 1:31:11

Zoro, quand tu mets une image (légère) de chargement au début de ta page, elle n'est pas chargée avant les autres ??? o_O

Kyle Katarn

18 janvier 2009 à 12:58:06

Un navigateur devrait la charger en premier, pour s'en assurer, on peut la charger avant le body en mettant ceci dans le <head>

var charg=new Image();
charg.src='chargement.gif';

Holowar | Carbon | Pug for PHP

SRL Killing

18 janvier 2009 à 18:37:41

En faites la page se charge : il y a un fond beige la barre de chargement de la page et puis pouf, la page s'affiche seulement elle a déjà chargée les images et donc n'affiche pas les images de chargement.

Je créer bien les image via le dom et je ne les précharge qu'une fois le chargement de la page terminée et pourtant elles se charge en même tant que la page.

Kyle Katarn

18 janvier 2009 à 18:44:18

J'imagine que tu as fait F5 pour vérifier que ce n'était pas simplement du au cache.

Holowar | Carbon | Pug for PHP

SRL Killing

18 janvier 2009 à 21:11:31

En faites, j'ai modifier deux trois petite bricoles et sa marche. L'image ne s'affiche que quelque millièmes de secondes mais elle s'affiche

.
Merci a tous.

Prechargement

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Prechargement

Chargement dans les images

Prechargement

Supprimer

Modérer

Signaler le message aux modérateurs