Existe-t-il un meilleur moyen de fondu avec des images haute résolution avec javascript/jquery après que le client l'a mis en cache, comme le fait Bing ou Yahoo Mail?Fading dans une image haute résolution après mise en cache
Vous recherchez la fonction load dans jQuery. Voici un exemple:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bigImg").load(function() {
$(this).fadeIn(2000);
});
});
</script>
</head>
<body>
<img id="bigImg" style="display:none" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/2006-03-26_Denver_Skyline_I-25_Speer.jpg" />
</body>
</html>
Et la référence jQuery: http://api.jquery.com/load-event/
Bonne programmation!
Quand préchargement une image, je fais toujours ceci:
newpic = new Image(); // create your new img
newpic.onload = function() // callback for when the img is loaded
{
// your callback, for you a .fadeIn()
};
newpic.src = your_img.jpg; // Setting the img src will start the caching process
Il fonctionne bien.
Il y a quelques mises en garde importantes détaillées sur la page d'événement de chargement à laquelle vous avez lié. Le comportement est incompatible avec le navigateur croisé et il n'est pas déclenché pour les images mises en cache, ce qui est précisément ce que l'OP recherche. – Finbarr
J'ai lu le texte de l'article de jquery dont vous parlez - ils le mentionnent comme un problème. J'ai effectué un test avec firebug, et l'image s'estompe parfaitement lors du chargement depuis le cache. Je souhaite que le scénario exact dont ils ont peur ait été exposé plus explicitement. –
Après une recherche autour d'un peu, quelqu'un a déjà une réponse pour une solution de contournement: http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached –