Mon image ne s'affiche pas !

Bonsoir à tous !

En faite à la base j'ai un script qui affiche une image avec une largeur et hauteur fixe (en pixel donc).

J'ai ensuite créer un deuxième script qui détecte si la hauteur de l'image de mon script précédent a bien la hauteur mentionner, sinon j'en affiche une autre car je considère que le contenu ne s'affiche pas, mais le soucis c'est que mon image alternative ne s'affiche pas quand le contenu ne s'affiche pas !

Voici le code en question :

jQuery(document).ready(function(){
	if (jQuery('#test').height() == 0) {
	document.getElementById("test").innerHTML ='<img class="img" src="image_alternative.jpg"/>';
	}
});

Comment remédier au problème ? merci d'avance !
Modifié par Ornitorink (30 Mar 2014 - 21:43)

Salut,

Je début en JS alors je ne sais pas trop comment m'y prendre pour que ça marche correctement.

Voila mon code en un peu plus complet :

<div id="test">
<script src="script contenant plein de truc dont une bannière fixé en pixel.js"></script>
<script type="/text/javascript">
jQuery(document).ready(function(){
	if (jQuery('#test').height() == 0) { //Si la hauteur de mon image dans mon fichier .js est à 0, c'est que le contenu ne s'affiche pas ou que le .js a été remove, donc j'affiche une autre image.
	document.getElementById("test").innerHTML ='<img class="img" src="image_alternative.jpg"/>';
	}
});
</script>
</div>

J'espère que c'est plus clair, je voulais le faire en PHP mais c'est pas possible de détecter une image qui est dans un fichier alors obliger de me rabattre sur du JS mais j'ai un peu de mal...
Modifié par Ornitorink (31 Mar 2014 - 16:40)

Alors tu m'as embrouillé pour rien. L'exemple que j'ai donné précédemment était juste pour dire qu'au lieu de passer par une détection de hauteur/largeur, tu peux tout simplement passer par un évènement JS lié à l'image "onerror" (par exemple) qui te permettra de vérifier si l'image a bien été chargée.
De plus, tu peux tout de même mettre une balise <img> contenant une image transparent d'un pixel que tu remplaceras ensuite via ton script (dont d'ailleurs la démarche m'intrigue). Pourquoi le script doit placer une image ?
Et pour être tout à fait franc, tes explications ne sont pas si limpides que ça. Si c'est évident pour toi, dis-toi que ça ne l'est pas forcément pour ceux qui tentent de comprendre.
Au passage, ce n'est pas la peine de mettre ton script dans la <div>, ça serait même préférable qu'il soit en fin de document.

Bon, j'ai l'impression que ça va être compliqué.
La place du script n'influe en rien le fait que tu puisses mettre ton image dans la <div> #test. Pour une question d'optimisation, celui-ci doit être en fin de document.
La possibilité que l'évènement "onerror" ne t'indique pas que ton image n'a pas été chargée est la même que la gymnastique que tu utilises. Si cet évènement est présent, c'est pour te permettre cela et t'éviter d'inventer des choses.
Aussi complexe que soit le traitement que tu réalises (qui m'intrigue d'ailleurs toujours autant), tu peux, comme je l'ai dis précédemment, placer une image transparente de 1 pixel dans une balise <img> que tu changes ensuite via ton script.

<div id="test">
	<img src="blank.png" alt="" />
</div>
<script type="text/javascript">
	var testImg = document.querySelector("#test img");
	
	testImg.onerror = function (){
		testImg.src = "image-alternative.jpg";
	}
	
	// Une fois que tout est prêt, tu changes le "src" de l'image
	testImg.src = "image-par-defaut.jpg";
</script>

Maintenant si tu restes aussi catégorique sur tes avis, je pense que mes messages ne serviront plus à grand chose .

La citation dans ta signature résume le contenu de mon script, et si je met mon script en fin de document mon image s'affichera aussi en fin de document, ce n'est pas ce que je veux.

Dit toi que dans mon script il y a une image "dynamique" ou plutôt un code complexe qui permet d'afficher une sorte d'animation et qu'il n'est pas possible de séparer le code de l'image sous forme d'extension basique sous peine de ne rien voir s'afficher.

Je ne peux pas afficher mon image avec du .jpg, .png ou autre, c'est obligatoirement dans un fichier .JS pour que ça marche, tu comprends ?

C'est pour cette raison que je test si mon script "s'affiche" car "l'image" c'est le script en lui même en quelque sorte.

J'ai donc quelque chose comme ça :

<body>
<!--Blabla contenu-->
<div id="test">
<script src="image.js"></script>
</div>
<!-- Blabla contenu -->
<script src="detection.js"></script>
</body>

Bien entendu le "detection.js" c'est le code JS que je t'es montrer.

Seulement bien sur si je suis la c'est que mon script de détection fonctionne pas, enfin il marche mais seulement avec un document.write mais comme tu dois le savoir ça remplace toute la page html par le contenu du document.write ce qui n'est pas bon et je n'arrive pas à trouver une alternative.

Et je ne vois pas ou tu veux en venir avec ton image transparente, en quoi ça va m'aider de remplacer une image transparente par une image contenu dans un script si ce script n'est pas charger ? on n'en revient au même point que ya rien qui s'affiche quand mon script "image.js" n'est pas charger ou que l'image dedans ne s'affiche pas
Modifié par Ornitorink (31 Mar 2014 - 22:37)

Bonjour !

Je me permets de répondre à nouveau car j'ai résolu tout seul mon problème.

Vu que je ne peux pas récupérer la hauteur, et que mon image dynamique passe par un iframe pour être afficher, j'ai donc fait ceci qui fonctionne à merveille :

function MaFonction() {

    if(document.getElementsByTagName("iframe").item(0) == null)
        {
            document.getElementById("MaDiv").innerHTML = 'Le contenu est bloquer, j\'affiche une image alternative';
	}
	
}

window.setTimeout('MaFonction()', 1500); // Ça ne se charge pas aussitôt, je mets donc un timer pour être sur que le contenu à été pleinement chargé avant l’exécution du script. 

Modifié par Ornitorink (19 May 2014 - 15:39)