[Résolu] Utilité d'une fonction preLoadImage() en javascript ??

Bonjour,

Sur certains sites, et en particulier sur les sites réalisés avec des éditeurs graphiques, je peux trouver des fonctions "preloadimage" activées dans la balise "body".

A quoi cela sert-il ? Est-ce vraiment nécessaire ?

Car je fais de la maintenance de sites et je recois parfois ce genre de chose que j'ai envie d'effacer et lorsque je le fais cela marche aussi bien...

Quelqu'un me convaincra-t-il de ne pas toucher a ce genre de fonctions ?

Merci !

Heriquet
Modifié par Heriquet (19 May 2008 - 09:40)

Bonjour,

L'utilisation principale du préchargement d'images en Javascript concerne les effets de rollover avec image de fond, ou les effets de rollover Javascript sur un élément IMG avec changement de l'attribut src.
Si l'image n'est pas préchargée, il y a un temps de latence. Ce temps de latence doit être observé non pas en local, où il est presque nul, mais en chargeant les pages sur un serveur distant, voire en bridant la connexion ou en utilisant une connexion bas-débit.

En CSS, la technique des portes coulissantes permet d'éviter d'avoir à charger deux images différentes (une dès le départ et l'autre en préchargement via Javascript).

Ok merci pour ces éclaircissements... je connais et apprécie la technique des portes coulissantes.

Je vais dès lors pouvoir exterminer tout ce javascript au profit des portes coulissantes ! Cela me parait plus performant et plus propre.

Heriquet a écrit :
Je vais dès lors pouvoir exterminer tout ce javascript au profit des portes coulissantes !

Ah...

Il y a pourtant des cas où passer par un préchargement en Javascript est tout à fait pertinent... par exemple lorsqu'on fait un rollover en Javascript d'une image portant une information (bouton, élément de menu, etc.).

Par exemple si j'ai ceci:

<a href="/annonces/">
	<img src="/img/annonces1.png" alt="Petites annonces" />
</a>

... avec une fonction JS qui remplace annonces1.png par annonces2.png lors du survol, j'ai une solution accessible.

Si je supprime l'image du code HTML, et que je passe l'image en image de fond du lien, avec technique des portes coulissantes pour regrouper annonces1.png et annonces2.png, je crée un problème d'accessibilité (information non accessible dans certains contexte d'utilisation).

Donc avant de tout bazarder, un peu de discernement ne peut pas faire de mal.

Oui certainement...

Mais dans les cas que j'ai rencontrés (par exemple un drapeau qui devient plus clair quand la souris passe dessus), c'est tout a fait adapté je pense

Merci de la précision quand-même.

Heriquet a écrit :
Mais dans les cas que j'ai rencontrés (par exemple un drapeau qui devient plus clair quand la souris passe dessus), c'est tout a fait adapté je pense

Si le drapeau est le seul contenu du lien, pour que le lien soit accessible il faut utiliser le type de code HTML que je donnais dans mon message précédent, et un rollover Javascript, ce qui implique un un préchargement en JS de la deuxième image (ou bien du opacity: .6 pour l'état :hover du lien, éventuellement).

Si le drapeau est utilisé comme image de fond d'un lien qui a un texte visible par ailleurs, on peut passer par CSS.

Si l'image est le seul contenu informatif et que cette image est une image de fond CSS, alors tu as un problème d'accessibilité.
Ensuite, l'accessibilité n'est pas nécessairement un critère dans les projets sur lesquels tu travaille.

Oups bin de fait j'avais pas pensé à cet aspect d'accessibilité...

Va falloir modifier ca... moi j'avais mis une image en fond...

Merci pour les explications !