En réponse à
bendivx2007@gmail.com qui nous a susurré, en date du :
19/07/07 16:38, le message sibyllin suivant :
> bonjour,
>
> je vous expose mon petit problème....
>
> je suis débutant en javascript et je cherche à précharger une image
> avant de l'afficher dans le navigateur.
Il vaut nettement mieux faire du post chargement :-)
JS dans le head :
=================
function charge_img(fichier, lieu) {
var I = new Image();
I.onload = function() {
if(document.getElementById)
document.getElementById(lieu).src = I.src
else
document.images[lieu].src = I.src;
}
I.src = fichier;
}
// post chargement
window.onload = function() {
charge_img('<?= $grde_vue ?>', 'visu'); };
HTML :
======
<img id="visu" name="visu" src="attente.gif" alt="" >
> pour vous situer, la résolution de l'image en question est de 7330 x
> 900 (pixels) l'image pèse environ 2 Mo.
>
> j'ai fait quelques recherches sur internet mais je n'arrive pas à
> trouver qq chose collant complètement à mon besoin
>
> voici le problème :
>
> la page dans laquelle je veux faire ce preload est une page PHP.
>
> - ce php va générer une image unique à chaque visite de 7330 x 900
> pixels. (et unique à chaque rechargement de page).
> - puis le php va afficher l'image de manière classique --> en faisant
> un echo ".....img src= ..
Assez simple :
dans le html,
1) là où on veut la grande image
<img name="visu" src="wait.gif" alt="visuel image" />
l'image wait.gif pourrait être : [attente chargement]
2) juste avant le </body> :
<img style="position:absolute;left:-4000px;" src="grde_vue.jpg" alt=""
onload="document.images['visu'].src=this.src">
Plus simple ?
<img src="grde_vue.jpg" style="visibility:hidden" alt=""
onload="this.style.visibility='visible';">
Variante (on connait la taille maxi de l'image) :
CSS :
=====
#visu { width: 7330px; height: 900px;
background: url(wait.gif) no-repeat center center #ddd; }
#visu.visu { background-image: url(grde_vue.jpg); }
HTML :
======
<body onload="document.visu.className='visu';">
<img id="visu" name="visu" src="vide.gif" alt="visualisateur" "title="">
> et de plus si je rafraichit la page je voudrais que la nouvelle image
> généree remplace la précédente de manière instantanée également.
Pas ni compris ...
puisqu'on recharge une page avec une nouvelle image
le php n'a qu'à modifier là où il faut, non ?
--
Stephane Moriaux et son (moins) vieux Mac