Affichage de div si il y a une image existante à distant

Version imprimable

Bonjour à tous,

je viens vers vous pour vous demandé votre expertise sur ce sujets.

J’aimerai affiché une div, la div events si seulement si le contenu de cette div contient une image distante bien existence
alors on affiche dans mon fichier html la div avec son image + url.

si l'image en question n'existe pas sur internet, alors cette div ne dois pas existé dans mon fichier html

c'est possible de faire ça en html/css limite javascript?

j’espère que j'ai était un peux clair

voici mon code html/css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 #events { display:block; background-color: #F00; width:320px; height:50px; margin-bottom:10px; } #content { display:block; float:left; background-color: #efefef; width:320px; height:480px; }
Code:

1 2 3 4 5 <div id="events"> <a href="#"><img src="image.jpg" width="320" height="50" border="0"></a> </div> <div id="content"> </div>
merci et bonne journée

Re bonjour, j'ai essayé de cherché sur internet, j'ai trouvé cette solution pour le moment en javascript
je ne sais pas si c'est propre pouvez vous voir svp?

Merci

code css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#events {
	display:block;
	background-color: #F00;
	width:320px;
	height:50px;
	margin-bottom:10px;
}
#content {
	display:block;
	float:left;
	background-color: #efefef;
	width:320px;
	height:480px;
}

code javascript:

Code:

1
2
3
4
5
6
7
var myVerifImage = new Image();
myVerifImage.src="http://www.url.be/200.jpg";
if ( myVerifImage.complete){
	document.write('<div id="events"><a href="#"><img src="http://www.url.be/200.jpg" width="320" height="50" border="0"></a></div>');
} else {
        myVerifImage.src;
}

code html:

Code:

1
2
<div id="content">
</div>

28/02/2015, 01h58
jisig

Yes

Bonsoir,

À partir du moment où tu ne peux pas utiliser un langage serveur, personnellement ça me semble suffisamment propre.

Jisig.

Bonjour,

Citation:

Envoyé par IVIedia

(...)c'est possible de faire ça en html/css limite javascript?

en HTML/CSS non, en javascript effectivement.

Citation:

Envoyé par jisig

(...)personnellement ça me semble suffisamment propre.

navré de te décevoir jisig mais la solution présentée et des plus sale :aie:
:fleche: Comprendre document.write() en JavaScript.

Il me semble préférable d'utiliser les événements onload-onerror liés aux IMG pour tester si le chargement c'est bien déroulé.
- tu crées ton conteneur comme si aucune erreur ne devait se produire
- si une erreur au chargement se produit tu supprimes ce conteneur

Il ne reste plus qu'à gérer ces deux cas au travers des événements
Code:

1 2 3 4 5 6 7 8 9 10 11 var image = new Image(); image.onload = function(){ var oDest = document.getElementById('events'); oDest.firstChild.appendChild( this); }; image.onerror = function(){ alert('failed to load image'); // a SUPPRIMER bien sûr en production var oDest = document.getElementById('events'); oDest.parentNode.removeChild( oDest); }; image.src="http://www.developpez.net/template/images/logo.png";
j'attirre quand même l'attention sur au moins deux points

point #1 : le code HTML lié à cette exemple sera de la forme
Code:

1 2 3 <div id="content"> <div id="events"><a href="#"></a></div>  </div>
point #2 : mettre ce script en fin de fichier pour être sûr que le chargement de l'image ne se termine pas avant la création des éléments dans le DOM, on ne sait jamais!. (possibilité également de passer par un ajout sur le load du document).

exemple complet
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Chargement image</title> <style> #events { display:block; background-color:#F00; width:320px; height:50px; margin-bottom:10px; } #content { display:block; float:left; background-color:#efefef; width:320px; height:480px; } #events img { width:320px; height:50px; border: 0; } </style> </head> <body> <div id="content"> <div id="events"><a href="#"></a></div>  </div> </body> <script> var image = new Image(); image.onload = function(){ var oDest = document.getElementById('events'); oDest.firstChild.appendChild( this); }; image.onerror = function(){ alert('failed to load image') var oDest = document.getElementById('events'); oDest.parentNode.removeChild( oDest); }; image.src="http://www.developpez.net/template/images/logo.png"; </script> </html>
modifie le nom de l'image pour le test.

28/02/2015, 17h04
jisig

Merci NoSmoking

Bonjour,

Merci, bien lu et compris totalement ! ^-^

Jisig.
28/02/2015, 22h17
IVIedia

Bonsoir,

Merci NoSmoking ça fonctionne très bien le code, est facile à comprendre,
de plus avec votre solution je sais faire une intégration facile pour un support mobile

merci encore une fois, je met le post en mode résolu