Différences entre fonctions javascript : preloadimages et prechargimg

Signaler
Messages postés
18
Date d'inscription
lundi 9 avril 2007
Statut
Membre
Dernière intervention
11 août 2009
-
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
-
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)
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i
</script>

Dans :

MERCI
 

13 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
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         
Messages postés
18
Date d'inscription
lundi 9 avril 2007
Statut
Membre
Dernière intervention
11 août 2009

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.
Messages postés
18
Date d'inscription
lundi 9 avril 2007
Statut
Membre
Dernière intervention
11 août 2009

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
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
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.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
>>'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         
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
il fallait lire :
on peut dire oui, sinon pourquoi faire un préchargement ?
          [mon Site] [M'écrire] Bul         
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, Sinon, ça sert dans mon cas à faire en sorte
que les rollover de souris ne
rament</td>
</td></tr></tbody></table>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)
Messages postés
18
Date d'inscription
lundi 9 avril 2007
Statut
Membre
Dernière intervention
11 août 2009

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
Messages postés
18
Date d'inscription
lundi 9 avril 2007
Statut
Membre
Dernière intervention
11 août 2009

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<x.length; i++)
if(x[i].indexOf("#")!=0){ doc.precharg[j]=new Image; doc.precharg[j++].src=x[i];}}
}

Elle permet notamment aussi de mettre un petit bout de code à la fin, ce qui permet de les précharger en dernier apparemment:
<script language="JavaScript">
<!--
prechargimg('chien4.jpg','chien5.jpg')
//-->
</script>

- 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:
<table width="100%" border="0" cellpadding="0" cellspacing="0"> . 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 )
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
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.
Messages postés
18
Date d'inscription
lundi 9 avril 2007
Statut
Membre
Dernière intervention
11 août 2009

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
Messages postés
18
Date d'inscription
lundi 9 avril 2007
Statut
Membre
Dernière intervention
11 août 2009

Super!!! Arto_8000, j'ai enlevé les attributs top et left et ça marche nickel!
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
Oui, l'autre technique était celle avec les images cachées dans la page.