différences entre fonctions javascript : preloadimages et prechargimg

Question

Bonjour à tous et merci à Codes-SourceS qui aide bien les débutants comme moi. J'ai qqes petites questions: J'ai fait un site avec un menu qui contient des images rollover. J'ai utilisé la fonction javascript preloadimages qui marche très bien. Je n'arrive pas à savoir si, avec ce script (voir plus bas) : -les images sont chargées dans l'ordre demandé -les images restent en cache pour les pages html suivantes (est-ce qu'on peut charger en avance les images de tout le (petit!) site pendant la page d'accueil en gros) -si le préchargement des images met en attente le chargement même de la page html (et de ses propres images associées). J'ai vu qu'il existait une autre fonction javascript : prechargimg. En quoi est-elle différente? merci de m'aider. Je n'arrive pas à trouver un site qui définisse les différences entre ces fonctions et tous les arguments/actions de chacune. De nos jours avec l'ADSL, c'est plus d'une utilité folle le préchargement, mais quand même, je veux faire ça bien :) mon code actuel (qui marche): : (avec les autres fonctions utilisées) Dans : MERCI

Bul3 · Answer

bonjour,

>>J'ai utilisé la fonction javascript preloadimages qui marche très bien.
certes ... et ça sert à quoi ?
à n'afficher la page ( ne la mettre disponible ) que lorsque toutes les images sont chargées !
même celles qu'on ne verra jamais... et attendre ce temps là : pour quoi faire ?
si tu ne fais pas de préchargement, la page sera immédiatement disponible,
les images s'afficheront, tranquillement, au fûr et à mesure des besoins

10 images affichées en 1 seconde chacune, 
je préfère attendre 1 seconde lorsque que c'est nécessaire, 
plutôt que 10 secondes d'office

Cordialement          [mon Site] [M'écrire] Bul

remlev · Answer

COOL!!

ohh c'était justement ma question :
D'après toi la page ne s'affiche que quand TOUTES les images
indiquées dans la balise  sont chargées???

Sinon, ça sert dans mon cas à faire en sorte que les rollover de souris ne rament
pas. L'image sous-jacente étant déjà chargée dans le cache,
quand la souris survole , c'est direct.

remlev · Answer

Edit:
Merci pour ta réponse cependant.

Excuse de m'être un peu emporté. Je suis plus que débutant et j'ai juste besoin
qu'on m'explique mes erreurs. Là je viens de passer toute la nuit dernière dessus
et je suis un peu à cran:)

Cordialment

Arto_8000 · Answer

Pour : les images restent en cache pour les pages html suivantes (est-ce qu'on peut charger en avance les images de tout le (petit!) site  pendant la page d'accueil en gros)

C'est théoriquement possible juste en utilisant un script de préchargement d'image dans ta page d'accueil, mais tu n'es pas garanti que les images vont rester en cache (que le navigateur ne les recharge pas). Pour avoir cette garanti, il faut que tu te retourne vers le serveur. Le serveur peut envoyer une entête appelé "Expires" (lorsque les images sont demandé) qui dit au navigateur de ne pas recharger ces images avant un temps X.

Si tu roules sur un serveur Apache (PHP), tu peux utiliser le module mod_expiresqui te permet d'utiliser en toute simplicité cette entête.

Bul3 · Answer

>>'après toi la page ne s'affiche que quand TOUTES les images
>>indiquées dans la balise  sont chargées???
on peut dire oui, sinon pour faire un préchargement ?

>>Sinon, ça sert dans mon cas à faire en sorte que les rollover de souris ne rament pas. 
>>L'image sous-jacente étant déjà chargée dans le cach
bien sur....
mais au départ on attend le temps de tout charger 

je répète : 
100 images affichées en 1 seconde chacune, 
je préfère attendre 1 seconde et ce, uniquement lorsque que c'est nécessaire, 
plutôt que 100 secondes au départ, systématiquement.

          [mon Site] [M'écrire] Bul

Bul3 · Answer

il fallait lire :
on peut dire oui, sinon pourquoi faire un préchargement ?
          [mon Site] [M'écrire] Bul

PetoleTeam · Answer

Bonjour, ----, Sinon, ça sert dans mon cas à faire en sorte que les rollover de souris ne rament

De nos jour, un rollover peut se régler très facilement en CSS, et donc plus de question de preload or not preload! Pour ce faire : - mettre dans la même image, les deux images l'une sur l'autre, en haut l'image normale, en dessous l'image over. - dans la partie style du document on peut mettre, par exemple pour des images de 30px de hauteur a.test { background-image : url(images/test.png) no-repeat 0 0; } a.test:hover{ background-position : 0 -30px; } ..on opére dans ce cas par décalage de l'image du background... ;O)

remlev · Answer

Merci à tous!

je vais me pencher sur tout ça!
J'ai fait un test avec des grosses images (5Mo) pour être sûr de ce qui se passe:
j'ai l'impression qu'avec ce script:
-le préchargement se fait en même temps que le chargement de la page.
-tout reste en cache dans les pages suivantes (alors j'ai peut-être pas
 besoin de bidouiller le serveur, moi qui n'y connaît rien en modules)

c'est vrai que j'aurai pu utiliser les portes coulissantes, j'y ai pas pensé.
Mais grâce au java, j'ai pu facilement faire un rollover qui change les images
d'une autre partie de la page et ça c'est cool (on passe la souris sur le bouton "actualité", "actualité" change de couleur
et une image ou le texte d'actu est écrit apparaît)

merci encore

remlev · Answer

Re bonjour! - Je voudrais savoir si qqn peut finalement me dire s'il existe une différence fondamentale entre les fonctions javascript prechargimg et preloadimages ? Ou est-ce 2 noms différents pour la même fonction? code que j'ai trouvé pour prechargimg : function prechargimg(){ var doc=document; if(doc.images){if(!doc.precharg) doc.precharg=new Array(); var i,j=doc.precharg.length,x=prechargimg.arguments; for(i=0; i - J'ai également vu qu'on pouvait charger des images directement dans la page et de les rendre transparentes pour qu'elles n'apparaissent qu'au moment des rollovers. Que pensez vous de cette technique (juste en CSS)?: //et dans la CSS: #masque { display:none; position: absolute; } - Dernière demande (promis!) : Mon site est un tableau avec plein de cellules déclaré comme ça: . Il se "comporte" bien quand on réduit la taille de la fenêtre du navigateur. J'aimerais faire en sorte qu'une se superpose parfaitement avec une des cellules du tableau (avec utilisation de Z-index). Pour l'instant j'ai utilisé position:absolute . ça marche mais quand on réduit la fenêtre du navigateur, la zone se décale. Je n'y connais rien en float, span, relative... et tout ça tout ça. Si qqn peut aider c'est super sympa! url: http://patricelevassor.com/pl_light.html (quand on passe la souris sur le top menu, un texte apparaît en bas à droite du site : il s'agit d'un rollover simple plus une DIV superposée pour un effet de fade in )

Arto_8000 · Answer

Pour les deux fonctions, je dirais même que l'un est le nom en français (charger), l'autre en anglais (load) et devrais faire la même chose.

Pour l'autre technique, ça peut avoir des effets indésirables, car ces images vont se charger en même temps ou avant les autres qui sont déjà dans la page. Tandis que l'autre méthode attend que la page soit charger avant de charger les images qui n'ont pas besoin d'être charger dès le début.

Pour ton truc de CSS, quand tu utilises position absolute, par défault le top et le left est mis à la position où il est dans la page, donc fait juste enlever les attributs left et top et ça devrait fonctionner comme tu veux.

remlev · Answer

Merci!

Quand tu parles de "l'autre technique", tu veux bien parler de la technique des images masquées au départ, c'est ça?

Je vais essayer d'enlever les attributs left et top d'ici peu.

merci encore

remlev · Answer

Super!!! Arto_8000, j'ai enlevé les attributs top et left et ça marche nickel!

Arto_8000 · Answer

Oui, l'autre technique était celle avec les images cachées dans la page.

Différences entre fonctions javascript : preloadimages et prechargimg

13 réponses

Votre réponse

Discussions similaires