Web Developpement
Forum de discussions pour les webmasters et les web developpeurs. (PHP, SQL, XHTML, JavaScript, Référencement, Positionnement,...)
Vous n'êtes pas identifié.
#1 17-08-2008 21:17:18
Jamais deux sans 3 : chargement d'images
Donc voici mon 3em post dans cette catégorie, les 2 précédents étant des question simples, celle ci s'avere un tout petit peu moins facile.
Je suis donc en train de créer un site pour un réparateur/vendeur de quad, scooter, moto 50cc ...
Donc le proprio du magasin sera capable de mettre en ligne des articles pouvant contenir 10 images chacun.
Mon problème est, vu la taille des images et leur nombre, j'aimerais que chaque pages disposent d'un :
<img src="blabla.jpg" alt="" style="display:none;" />
Donc jusque là, tout est simple, je le colle en fin de page MAIS le problème étant que même en fin de page, les images sont chargés avant des images du graphisme ( donc tant qu'elles ne sont pas toutes chargées, l'image du header n'est pas chargée : Bahhh pas beau 
)
J'ai donc cherché à créer un petit script en utilisant la fonction <body onunload="chargement_img()"></body>
Mais dans ma fonction chargement_img(), j'ai codé ceci :
function chargement_img()
{
document.write('
<img src="bl0.jpg" alt="" style="display:none;" />
<img src="bl1.jpg" alt="" style="display:none;" />
<img src="bl2.jpg" alt="" style="display:none;" />
');
}
Mais voila, une fois la page finit de chargée, elle m'emmene sur une page vide (donc la page qui charge les images).
Auriez vous une idée de la façon de coder la fonction chargement_img() ??
Si oui, merci de me la poster, je vous en serais très reconnaissant !!
Merci d'avance !
Dernière modification par mic54800 (17-08-2008 21:31:37)
Hors ligne
Liens utiles
#2 17-08-2008 22:32:31
Re: Jamais deux sans 3 : chargement d'images
Bonsoir,
document.write va créer une page vierge et y écrire le code voulu.
Il serait plus logique de créer une fonction qui va disposer ces images suivant un autre.
Tout dépend de la construction du site (ou positionner ces images).
-------------------------------
PHP
OhMyPix (soon)
Hors ligne
#3 17-08-2008 22:51:33
Re: Jamais deux sans 3 : chargement d'images
Bah en fait, ce que je veux, c'est qu'une fois le site bien affiché, les images des articles soient en cours de chargement, même si le visiteur ne les voit pas.
Ce permet que dès qu'il arrive sur les articles, certaines images soient déjà chargées.
Donc le code que je cherche pourrait se trouver en début comme en fin de page ... aucune importance je pense !
Et pour le document.write, je pense que je commençais à comprendre lol
Donc existe-t-il une fonction ou un code qui permettrait lechargement de ces images une fois la page chargée ??
Hors ligne
#4 17-08-2008 23:12:05
Re: Jamais deux sans 3 : chargement d'images
Tiens : http://acestgratuit.free.fr/scripts_dhtml/image07.htm
Tu trouvera peut-être la solution à ton problème avec la fonction charge().
-------------------------------
PHP
OhMyPix (soon)
Hors ligne
#5 19-08-2008 21:07:17
Re: Jamais deux sans 3 : chargement d'images
Merci neo6, mais en fait ce n'est pas vraiment ce que je recherche.
Ce qu'il me faut est : précharger les images (sur chaques pages du site) dès que la page actuelle est finit de charger.
Ca ferait quelque chose dans ce genre :
function fct()
{
// Charger les images
}
<body onunload="fct();">
...
Tu vois le genre ?
Perso, je ne vois pas du tout comment faire =/
Hors ligne
#6 19-08-2008 21:50:10
Re: Jamais deux sans 3 : chargement d'images
Ici il ne s'agit pas d'un pré-chargement du contenu mais bien du contraire alors !
Je ne serais dire si l'utilisation de display: none suffit.
Il faudrait voir l'architecture de la page en question pour pouvoir créer un code JS qui se réfère aux blocs déjà existants.
En admettant que display: none suffit, il faudrait juste remplacer document.write par un bloc pré existant.
-------------------------------
PHP
OhMyPix (soon)
Hors ligne
Liens utiles
#7 19-08-2008 23:53:40
Re: Jamais deux sans 3 : chargement d'images
Mais ce bloc en question, comment faire pour qu'il ne fasse pas charger les images tant que la page n'est pas chargée ?
Parce que là, j'avou, ça fait moche le fait de charger des images des articles avant le graphisme =/
Si je met le bloc en display:none et une fois le chargement finit en display:block, rien ne change.
Même si le bloc est en display:none, il charge les images ...
J'ai trouvé ça sur le forum alsacreation :
var myimages=new Array()
function preloadimages(){
for (j=0;j<preloadimages.arguments.length;j++){
myimages[j]=new Image()
myimages[j].src=preloadimages.arguments[j]
}
}
preloadimages("image1.png","image2.png");
Est-ce que ça pourrait marcher pour moi ?
Je demande car je ne vois pas de chargement lorsque je consulte ma page.
(Ca serait bien que ce script soit celui que je cherche, il est facile à intégrer.)
Merci de me tenir au courant site ce script fonctionne comme celui qu'il me faut.
Dernière modification par mic54800 (20-08-2008 00:21:08)
Hors ligne
#8 21-08-2008 01:58:35
Re: Jamais deux sans 3 : chargement d'images
Pas une petite idée ??
Ca serait bien que vous m'aidiez car j'ai déjà envoyé le site sur le nouvel hebergeur, j'aimerais bien en finir vite avec cette histoire de chargement d'images.
Merci !!
Hors ligne
#9 21-08-2008 09:49:24
Re: Jamais deux sans 3 : chargement d'images
Tu pourrais peu être mettre tes images une fois le document charger en utilisant un onLoad je pense, mais bon dans tous les cas le fait de charger tes images avec du JavaScript n'est pas vraiment judicieux car tu y perdra en accessibilité.
Hors ligne
#10 21-08-2008 10:30:18
Re: Jamais deux sans 3 : chargement d'images
J'ai essayé en vain de faire afficher quelque chose durablement avec onunload().
J'ai fait un code qui va juste attendre X secondes avant d'afficher les images :
Certes ce n'est pas terrible mais ça fonctionne. Le timer est réglé sur 2 secondes (2000).
Code:
<html>
<head>
<style>
div#images {
border: 1px solid red;
margin: 20px auto;
padding: 10px;
text-align: center;
}
</style>
<script type="text/javascript"><!--
var images = new Array();
images[0] = "http://www.zone-webmasters.net/themes/dizweb2/images/Logo.png";
images[1] = "http://www.zone-webmasters.net/themes/dizweb2/images/Logo.png";
images[2] = "http://www.zone-webmasters.net/themes/dizweb2/images/Logo.png";
function quefaire() {
var table = '';
for (var i=0;i<images.length;i++) {
table += '<img src="' + images[i] +'" alt="" /><br /><br />';
}
if (document.getElementById)
document.getElementById("images").innerHTML = table;
else if (document.all)
document.all["images"].innerHTML = table;
}
//--></script>
</head>
<body onload="setTimeout('quefaire()', 2000)">
<div id="images">
<h1>liste</h1>
</div>
<input type="button" value="Voir" onclick="alert(document.getElementById('images').innerHTML)" />
</body>
</html>-------------------------------
PHP
OhMyPix (soon)
Hors ligne
#13 21-08-2008 11:45:06
Re: Jamais deux sans 3 : chargement d'images
Nikel 
Merci beaucoup neo6, tout marche impecablement !!
J'ai mis le setInterval à 10000 pour être sur que tout soit bien chargé !!
Si jamais tu trouve la même fonction avec onunload, t'peux la poster, je passe de temps en temps, mais te casse pas la tête non plus, c'est si jamais un jour tu en as besoin que que tu veux bien la partager !!
Merci encore !!
--
Avant, je mettais mes images en fin de page, juste avant le </body> mais ça buguait car des images des articles chargeaient avant même les images du graphisme .. pas térrible =/
Dernière modification par mic54800 (21-08-2008 11:46:40)
Hors ligne