je suis d=E9butant en javascript et je cherche =E0 pr=E9charger une image
avant de l'afficher dans le navigateur.
pour vous situer, la r=E9solution de l'image en question est de 7330 x
900 (pixels) l'image p=E8se environ 2 Mo.
j'ai fait quelques recherches sur internet mais je n'arrive pas =E0
trouver qq chose collant compl=E8tement =E0 mon besoin
voici le probl=E8me :
la page dans laquelle je veux faire ce preload est une page PHP.
- ce php va g=E9n=E9rer une image unique =E0 chaque visite de 7330 x 900
pixels. (et unique =E0 chaque rechargement de page).
- puis le php va afficher l'image de mani=E8re classique --> en faisant
un echo ".....img src=3D ..
mon probl=E8me est le suivant :
je voudrais que cette image ne soit visible que lorsqu'elle est
compl=E8tement charg=E9e par le browser de fa=E7on =E0 la voir quasi
instantan=E9ment apparaitre ( je pr=E9cise quasi car avec une taille comme
=E7a, windows, la carte graphique, .... vont entrer en jeu).
et de plus si je rafraichit la page je voudrais que la nouvelle image
g=E9n=E9ree remplace la pr=E9c=E9dente de mani=E8re instantan=E9e =E9galeme=
nt.
je n'ai pas de contrainte de langage (javascript ou autre
chose ....), dans cette page .php, j'ai d=E9j=E0 du php et du javascript.
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
jerome
Bonjour,
wrote:
je voudrais que cette image ne soit visible que lorsqu'elle est complètement chargée par le browser de façon à la voir quasi instantanément apparaitre ( je précise quasi car avec une taille comme ça, windows, la carte graphique, .... vont entrer en jeu).
En jouant avec "display" en css et "complete" en javascript : tu masques l'image par défaut et lorsqu'elle est chargé tu l'affiche.
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.
Attention si la nouvelle image porte le même nom que la précédente, elle risque de se retrouver dans le cache du navigateur.
-- Jérôme
Bonjour,
bendivx2007@gmail.com wrote:
je voudrais que cette image ne soit visible que lorsqu'elle est
complètement chargée par le browser de façon à la voir quasi
instantanément apparaitre ( je précise quasi car avec une taille comme
ça, windows, la carte graphique, .... vont entrer en jeu).
En jouant avec "display" en css et "complete" en javascript : tu masques
l'image par défaut et lorsqu'elle est chargé tu l'affiche.
je voudrais que cette image ne soit visible que lorsqu'elle est complètement chargée par le browser de façon à la voir quasi instantanément apparaitre ( je précise quasi car avec une taille comme ça, windows, la carte graphique, .... vont entrer en jeu).
En jouant avec "display" en css et "complete" en javascript : tu masques l'image par défaut et lorsqu'elle est chargé tu l'affiche.
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.
Attention si la nouvelle image porte le même nom que la précédente, elle risque de se retrouver dans le cache du navigateur.
-- Jérôme
ASM
En réponse à 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">
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
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">
En réponse à 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">
si je rafraichit la page je voudrais que la nouvelle image généree remplace la précédente de manière instantanée éga lement.
Pas ni compris ... puisqu'on recharge une page avec une nouvelle image le php n'a qu'à modifier là où il faut, non ?
--
oui, effectivement faut que j'explique un peu mieux .... :-)
en fait, cette page est une photo prise d'une webcam, ma page php récupère la dernière image prise, la traite pour ajouter différentes infos (grace au php) la stocke avec un nom aléatoire sur mon "serveur" puis, celle ci est affichée dans le navigateur. (le nom aléatoire c'est pour éviter que le navigateur m'affiche celle qui est en cache).
pour ce qui est du préchargement, c'est nickel, par contre j'utilise la fonction de "refresh" afin de raffraichir la page à intervalle régulier, et avoir ainsi toujours l'image affichée = la dernière image prise par la webcam !!!! (voila pourquoi je ne veux impérativement pas qu'il prenne celle en cache).
et ce je voudrais c'est que lorsque le refresh s'effectue la transition entre la nouvelle photo et l'ancienne se fasse de manière quasi instantanée (et éviter d'avoir un écran vide pendant 30 secondes .....).
j'avais pensé au départ a un effet de fading entre les images mais avec une taille pareil, ça risque d'être très moche car pas très fluide, du coup une transition instanée me va bien ...
en tout cas merci pour vos infos
merci pour vos réponses !!!!!
On 20 juil, 11:49, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
si je rafraichit la page je voudrais que la nouvelle image
généree remplace la précédente de manière instantanée éga lement.
Pas ni compris ...
puisqu'on recharge une page avec une nouvelle image
le php n'a qu'à modifier là où il faut, non ?
--
oui, effectivement faut que j'explique un peu mieux .... :-)
en fait, cette page est une photo prise d'une webcam, ma page php
récupère la dernière image prise, la traite pour ajouter différentes
infos (grace au php) la stocke avec un nom aléatoire sur mon
"serveur" puis, celle ci est affichée dans le navigateur. (le nom
aléatoire c'est pour éviter que le navigateur m'affiche celle qui est
en cache).
pour ce qui est du préchargement, c'est nickel, par contre j'utilise
la fonction de "refresh" afin de raffraichir la page à intervalle
régulier, et avoir ainsi toujours l'image affichée = la dernière
image prise par la webcam !!!! (voila pourquoi je ne veux
impérativement pas qu'il prenne celle en cache).
et ce je voudrais c'est que lorsque le refresh s'effectue la
transition entre la nouvelle photo et l'ancienne se fasse de manière
quasi instantanée (et éviter d'avoir un écran vide pendant 30
secondes .....).
j'avais pensé au départ a un effet de fading entre les images mais
avec une taille pareil, ça risque d'être très moche car pas très
fluide, du coup une transition instanée me va bien ...
si je rafraichit la page je voudrais que la nouvelle image généree remplace la précédente de manière instantanée éga lement.
Pas ni compris ... puisqu'on recharge une page avec une nouvelle image le php n'a qu'à modifier là où il faut, non ?
--
oui, effectivement faut que j'explique un peu mieux .... :-)
en fait, cette page est une photo prise d'une webcam, ma page php récupère la dernière image prise, la traite pour ajouter différentes infos (grace au php) la stocke avec un nom aléatoire sur mon "serveur" puis, celle ci est affichée dans le navigateur. (le nom aléatoire c'est pour éviter que le navigateur m'affiche celle qui est en cache).
pour ce qui est du préchargement, c'est nickel, par contre j'utilise la fonction de "refresh" afin de raffraichir la page à intervalle régulier, et avoir ainsi toujours l'image affichée = la dernière image prise par la webcam !!!! (voila pourquoi je ne veux impérativement pas qu'il prenne celle en cache).
et ce je voudrais c'est que lorsque le refresh s'effectue la transition entre la nouvelle photo et l'ancienne se fasse de manière quasi instantanée (et éviter d'avoir un écran vide pendant 30 secondes .....).
j'avais pensé au départ a un effet de fading entre les images mais avec une taille pareil, ça risque d'être très moche car pas très fluide, du coup une transition instanée me va bien ...
en tout cas merci pour vos infos
ASM
En réponse à qui nous a susurré, en date du : 20/07/07 15:41, le message sibyllin suivant :
pour ce qui est du préchargement, c'est nickel, par contre j'utilise la fonction de "refresh" afin de raffraichir la page à intervalle régulier, et avoir ainsi toujours l'image affichée = la dernière image prise par la webcam !!!! (voila pourquoi je ne veux impérativement pas qu'il prenne celle en cache).
et ce je voudrais c'est que lorsque le refresh s'effectue la transition entre la nouvelle photo et l'ancienne se fasse de manière quasi instantanée (et éviter d'avoir un écran vide pendant 30 secondes .....).
alors tu - donnes toujours le même nom à la dernière image (ie:'webcam_img.jpg') - et mets en bac la précédente (ou pas ?) - rafraichis via JS
<script type="text/javascript"> function newImg() { var I = new Image(); I.onload = function() { if(document.getElementById) document.getElementById('visu').src = I.src else document.visu.src = I.src; setTimeout('newImg()', 300000); } I.src = 'webcam_img.jpg?'+Math.random(); } window.onload = newImg; </script> <img id="visu" name="visu" src="webcam_img.jpg" style="visiblity:hidden" onload="this.style.visibility='visible';" alt="vue webcam" title="ma webcam"> vue actualisée toutes les 5 minutes
on peut améliorer avec un effet de transition par fadding
-- Stephane Moriaux et son (moins) vieux Mac
En réponse à bendivx2007@gmail.com qui nous a susurré, en date du :
20/07/07 15:41, le message sibyllin suivant :
pour ce qui est du préchargement, c'est nickel, par contre j'utilise
la fonction de "refresh" afin de raffraichir la page à intervalle
régulier, et avoir ainsi toujours l'image affichée = la dernière
image prise par la webcam !!!! (voila pourquoi je ne veux
impérativement pas qu'il prenne celle en cache).
et ce je voudrais c'est que lorsque le refresh s'effectue la
transition entre la nouvelle photo et l'ancienne se fasse de manière
quasi instantanée (et éviter d'avoir un écran vide pendant 30
secondes .....).
alors tu
- donnes toujours le même nom à la dernière image (ie:'webcam_img.jpg')
- et mets en bac la précédente (ou pas ?)
- rafraichis via JS
<script type="text/javascript">
function newImg() {
var I = new Image();
I.onload = function() {
if(document.getElementById)
document.getElementById('visu').src = I.src
else
document.visu.src = I.src;
setTimeout('newImg()', 300000);
}
I.src = 'webcam_img.jpg?'+Math.random();
}
window.onload = newImg;
</script>
<img id="visu" name="visu" src="webcam_img.jpg"
style="visiblity:hidden"
onload="this.style.visibility='visible';"
alt="vue webcam" title="ma webcam">
vue actualisée toutes les 5 minutes
on peut améliorer avec un effet de transition par fadding
En réponse à qui nous a susurré, en date du : 20/07/07 15:41, le message sibyllin suivant :
pour ce qui est du préchargement, c'est nickel, par contre j'utilise la fonction de "refresh" afin de raffraichir la page à intervalle régulier, et avoir ainsi toujours l'image affichée = la dernière image prise par la webcam !!!! (voila pourquoi je ne veux impérativement pas qu'il prenne celle en cache).
et ce je voudrais c'est que lorsque le refresh s'effectue la transition entre la nouvelle photo et l'ancienne se fasse de manière quasi instantanée (et éviter d'avoir un écran vide pendant 30 secondes .....).
alors tu - donnes toujours le même nom à la dernière image (ie:'webcam_img.jpg') - et mets en bac la précédente (ou pas ?) - rafraichis via JS
<script type="text/javascript"> function newImg() { var I = new Image(); I.onload = function() { if(document.getElementById) document.getElementById('visu').src = I.src else document.visu.src = I.src; setTimeout('newImg()', 300000); } I.src = 'webcam_img.jpg?'+Math.random(); } window.onload = newImg; </script> <img id="visu" name="visu" src="webcam_img.jpg" style="visiblity:hidden" onload="this.style.visibility='visible';" alt="vue webcam" title="ma webcam"> vue actualisée toutes les 5 minutes
on peut améliorer avec un effet de transition par fadding
-- Stephane Moriaux et son (moins) vieux Mac
ASM
En réponse à qui nous a susurré, en date du : 20/07/07 15:41, le message sibyllin suivant :
et avoir ainsi toujours l'image affichée = la dernière image prise par la webcam !!!! (voila pourquoi je ne veux impérativement pas qu'il prenne celle en cache).
bon ... le fichier php rafraichi est re-enregistré ? donc le brouteur ira pêcher celui-là au lieu de celui en cache.
l'image dans nouveau fichier php a changé de nom, donc OK
et ce je voudrais c'est que lorsque le refresh s'effectue la transition entre la nouvelle photo et l'ancienne se fasse de manière quasi instantanée (et éviter d'avoir un écran vide pendant 30 secondes .....).
Oh la la ! tu en veux des choses !
Là sans JS je vois pas comment y parvenir.
j'avais pensé au départ a un effet de fading entre les images mais avec une taille pareil, ça risque d'être très moche car pas très fluide, du coup une transition instanée me va bien ...
une nouvelle piste ? Non ? Bon tant pis, la voilà ...
<?php // tout l'truc pour créer l'image $webcam = ''; // son chemin et nom ?> <html> <META http-equiv="refresh" content="300" /> <img src="<?= $webcam ?>" onload="parent.document.visu.src=this.src"> </html>
-- Stephane Moriaux et son (moins) vieux Mac
En réponse à bendivx2007@gmail.com qui nous a susurré, en date du :
20/07/07 15:41, le message sibyllin suivant :
et avoir ainsi toujours l'image affichée = la dernière
image prise par la webcam !!!! (voila pourquoi je ne veux
impérativement pas qu'il prenne celle en cache).
bon ... le fichier php rafraichi est re-enregistré ?
donc le brouteur ira pêcher celui-là au lieu de celui en cache.
l'image dans nouveau fichier php a changé de nom, donc OK
et ce je voudrais c'est que lorsque le refresh s'effectue la
transition entre la nouvelle photo et l'ancienne se fasse de manière
quasi instantanée (et éviter d'avoir un écran vide pendant 30
secondes .....).
Oh la la ! tu en veux des choses !
Là sans JS je vois pas comment y parvenir.
j'avais pensé au départ a un effet de fading entre les images mais
avec une taille pareil, ça risque d'être très moche car pas très
fluide, du coup une transition instanée me va bien ...
une nouvelle piste ?
Non ?
Bon tant pis, la voilà ...
En réponse à qui nous a susurré, en date du : 20/07/07 15:41, le message sibyllin suivant :
et avoir ainsi toujours l'image affichée = la dernière image prise par la webcam !!!! (voila pourquoi je ne veux impérativement pas qu'il prenne celle en cache).
bon ... le fichier php rafraichi est re-enregistré ? donc le brouteur ira pêcher celui-là au lieu de celui en cache.
l'image dans nouveau fichier php a changé de nom, donc OK
et ce je voudrais c'est que lorsque le refresh s'effectue la transition entre la nouvelle photo et l'ancienne se fasse de manière quasi instantanée (et éviter d'avoir un écran vide pendant 30 secondes .....).
Oh la la ! tu en veux des choses !
Là sans JS je vois pas comment y parvenir.
j'avais pensé au départ a un effet de fading entre les images mais avec une taille pareil, ça risque d'être très moche car pas très fluide, du coup une transition instanée me va bien ...
une nouvelle piste ? Non ? Bon tant pis, la voilà ...
