Probleme chargement image .load sur firefox, explorer

Bonjour à tous,

Besoin d'un petit coup de pouce.

La page1 de mon site contient une grosse photo, j'utilise un load.gif pour combler le temps de chargement, que j'appel avec la fonction suivante :

	 var hideFunction = function(){
	
	$("#load").hide();
	$("#image").fadeIn(200);
	
	}
	
	$("#image").load(hideFunction);	

    <img id="load" src="pages/images/load.gif"/>
    <img id="image" src="pages/images/image.png" style="display:none;"/>

le load.gif laisse bien place à mon image.png une fois que celle-ci est chargée.

Le problème intervient lorsque je quitte la page1 pour naviguer sur une autre page de mon site, comme pourrai le faire un utilisateur, puis que je reviens sur ma page1 mon image.png ne se charge plus, seul le load.gif reste.

Comme si la fonction .load ne se lançait plus vu que #image avait été chargée auparavant.
Je pense que mon #image est dans le cache.

C'est un problème que j'ai remarqué qu'avec Firefox, pour le reste des navigateurs (explorer, safari, chrome,..) ma fonction marche bien, #load laisse toujours place à #image.

Comment je pourrai remédier à ça?

Merci d'avance

Modifié par Claude Money (06 Aug 2012 - 16:14)

Salut,

j'ai effectivement l'impression que l'event load à des comportements bizarres et inattendus selon les navigateur, d'ailleurs la doc jQuery le mentionne (http://api.jquery.com/load-event/) :

a écrit :

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

- It doesn't work consistently nor reliably cross-browser
- It doesn't fire correctly in WebKit if the image src is set to the same src as before
- It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

En revanche pour ce qui est de la résolution du soucis je sèche, j'ai bien pensé à rajouter un paramètre d'anti-cache à la fin de ton image :

<img id="load" src="pages/images/load.gif"/>
<img id="image" src="pages/images/image.jpg?125648951" style="display:none;"/>

mais :
- Ça t'oblige à le générer dynamiquement lors de l'affichage de la balise <img> (coté serveur : asp, php etc...)
- Ça annihile le gain au chargement de la page apporté par la mise en cache du navigateur.

Bref ... c'est moche

Bonjour,

Habituellement, lorsque j'ai une image longue à chargée, j'applique un loader en tant que `background-image` de la balise `<img/>` (ou en background d'un parent qui l'englobe)

Et tout ça se fait en CSS et sans problème
Modifié par Vaxilart (03 Aug 2012 - 16:19)

Un grand merci Hixe c'est l'intention qui compte.

Vaxilart merci à toi, mais mon #image est une composition à fond transparent c'est pour ça que je voulais faire disparaître le #load une fois l'image chargée.

Je ne sais plus quoi faire, j'ai essayé de lancé ma fonction si mon image n'était pas défini et toujours le même problème sur Firefox

var hideFunction = function(){
	
		$("#load").hide();
		$("#image").fadeIn(200);
	
	}
	
	if ($("#image").width() == "") {
		
	$("#image").load(hideFunction);
	};

Pareil quand je fais une condition .hide, firefox ne la prend pas en compte

var hideFunction = function(){
	
		$("#load").hide();
		$("#image").fadeIn(200);
	
	}
	
	if ($("#image").hide()){
		
	        $("#image").load(hideFunction);
	
       };

Si quelqu'un a une piste je suis preneur

Salut, ce n'est pas très propre mais ce genre de problème peut facilement être résolu avec un setTimeOut, en appelant ta fonction hideFunction() après un délai de 300 à 800ms maximum, cela devrait laisser le temps à ton image de charger.

Autre chose, tu peux essayer non pas de masquer ton #image (display none css) mais de la faire afficher en dehors de ta zone d'écran, avec un positionnement absolu et un left à -10000px par exemple, de mémoire le display:none jouait sur l'événement load sur certains browsers.