Chargez uniquement l'image d'arrière-plan lorsqu'il a été complètement chargé?

Bien, le titre décrit à peu près ma question:

Comment charger l'image d'arrière-plan de façon dynamique après avoir été complètement chargé? Parfois, je dois utiliser des fonds trop gros qu'il peut falloir un certain temps pour le navigateur pour le télécharger. Je préférerais "le charger en arrière-plan" et le laisser disparaître lorsqu'il a été complètement chargé.

Je pense que jQuery serait le meilleur à utiliser, mais je veux aussi que mes antécédents apparaissent si JavaScript a été désactivé. Si cela n'est vraiment pas possible, que ce soit, mais je pense que c'est?

Cordialement, Aart

……..

MODIFIER:

Merci beaucoup, les gars! J'ai été écouté avec ça depuis des siècles et je ne pouvais pas penser à une façon agréable et facile.

J'ai converti la solution Javascript de Jeffrey en jQuery, juste parce que le fondu intégré de jQuery est tellement génial.

Je vais simplement l'afficher ici si quelqu'un d'autre a le même problème:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type='text/javascript'> $(document).ready(function() { $('#img').css('opacity','0').load(function() { $(this).animate({ opacity: 1 }, 500); }); }); </script> <img src='yourimage.jpg' id='img'/>

Si l'image est un élément img :

<img src="bg.jpg" id="img" onload="this.style.opacity='1'" /> <script>document.getElementById("img").style.opacity="0";</script>

Cela devrait charger l'image normalement si Javascript est désactivé, mais le montrer uniquement une fois qu'il est chargé en supposant qu'il soit activé.

Une chose à noter (que j'ai négligé); Certains navigateurs ne tenteront même pas de charger une image si sa propriété d' display est none . C'est pourquoi cette méthode utilise l'attribut d' opacity .

Vous ne pouvez pas le faire lorsque JS est désactivé. Cependant, ce que vous pouvez faire, c'est de définir l'image d'arrière-plan dans CSS, puis d'utiliser le script suivant (en supposant que l'élément possède le myelem ID).

 (function() { var elm = document.getElementById('myelem'), url = 'background image URL here'; elm.style.backgroundImage = "none"; var tmp = new Image(); tmp.onload = function() { elm.style.backgroundImage = "url('"+url+"')"; // or insert some other special effect code here. }; tmp.src = url; })();

EDIT: Bien que, assurez-vous que vos images d'arrière-plan sont optimales. Si elles sont PNG, essayez de les avoir indexées avec un tableau de couleur aussi petit que possible ou assurez-vous que le canal alpha est supprimé s'il n'y a pas de transparence. Si elles sont JPEG, essayez d'ajuster la compression.

Consultez l'exemple sur cette page: http://www.w3schools.com/jsref/event_img_onload.asp

L'utilisation de "image.onload" démarrera votre code uniquement lorsque l'image est prête

Sans javascript, vous ne pouvez pas avoir d'événements, donc vous ne pourrez pas savoir si l'image est chargée, au moins pour le premier rendu.

Vous pouvez également utiliser une précharge css (mettre l'image en arrière-plan dans une division cachée), mais cela fonctionnerait mieux dans votre premier rafraîchissement et non pendant le chargement.

Vous pouvez définir une variable sur l'image, et quand elle la charge, placez-la sur le fond du corps:

 var my_bg = new Image(); my_bg.src = "url(mybackground.png)"; document.style.backgroundImage = my_bg;

Ce que vous recherchez, c'est une image sur la méthode de téléchargement. Si vous réglez l'image avec un affichage: aucune, elle ne sera visible. Pour contourner le manque éventuel de javascript, vous faites ce qui suit:

 <body style="background-image:url(image.png);"> <img src="image.png" style="display:none" onLoad="changeBackground();" /> </body> <script> document.body.style.backgroundImage = ""; function changeBackground(){ document.body.style.backgroundImage = "url(image.png)"; } </script>

De cette façon, si javascript n'est pas activé, le bg se chargera normalement. Si c'est le cas, il affichera à la fin