Y a-t-il un moyen de s'assurer qu'une image d'arrière-plan (300K) est toujours affichée en premier AVANT que tout autre contenu n'apparaisse sur la page?Comment puis-je m'assurer qu'une image d'arrière-plan s'affiche avant le chargement de la page?
Sur le serveur, nous avons accès à PHP.
Tout le contenu html est servi et analysé avant même qu'il commence à récupérer l'image, donc vous avez un problème avant de commencer.
Vous pouvez contourner ce problème en masquant par programmation le contenu, puis en déclenchant un «show» lorsque l'image est chargée.
-à-dire:
<html>
<body>
<image here/>
<div id="content" style="display:none;" >
</div>
<script type="psudocode">
when(image.loaded){
$("#content").show();
}
</script>
</body>
</html>
La première phrase est inexacte. Un navigateur peut commencer à télécharger et même finir de télécharger d'autres ressources requises avant même que la ressource HTML initiale ait été entièrement reçue. Notez également que la question concerne une image d'arrière-plan et non un élément d'image. – AnthonyWJones
Je pense que la seule façon que vous serez en mesure de le faire est avec javascript - Envoyer le code HTML de l'utilisateur qui ne contient que votre image de fond et certains javascript qui soit attend une certaine quantité de temps avant d'afficher le reste du contenu ou utilise AJAX pour récupérer le reste du contenu (essentiellement la même chose).
Si vous avez tout le contenu à l'intérieur d'un conteneur, vous pouvez probablement vous rapprocher de cette technologie. Il échouera également gracieusement si javascript est désactivé/indisponible. Donc, si vous devez le faire à cause d'un gestionnaire ou de quelque chose, c'est la méthode que j'utiliserais.
<html><head><!-- head section --></head>
<body>
<div id="container">
<script type="text/javascript">
<!--
document.getElementById('container').style.display = 'none';
-->
</script>
Content goes here
</div>
<script type="text/javascript">
<!--
document.getElementById('container').style.display = 'block';
-->
</script>
</body></html>
Si vous avez très peu de contenu, cependant, il ne fera probablement pas beaucoup de bien. Vous pouvez bien sûr ajouter une minuterie sur le second bloc javascript, de retarder pour une seconde ou: P
<html><head>
<script type="text/javascript">
//Hide on load
onload=function(){
document.body.style.display="none";
var imag = new Image();
imag.onload=function(){
var main = document.body;
main.style.backgroundImage="url("+this.src+")";
main.style.display="";
};
imag.src="http://dayton.hq.nasa.gov/IMAGES/MEDIUM/GPN-2000-001935.jpg";
}
</script>
</head>
<body>
YOU CAN' T SEE MEE!!
</body>
</html>
Une façon possible, si vous ne voulez pas compter sur JavaScript, est de faire un page factice avec seulement l'image de fond. Après quelques secondes, il redirige vers la page réelle, et l'arrière-plan se chargera rapidement car il est déjà dans le cache.
Pas une solution super attrayante, si le timing est fixé, je pense.
Notez que 300 Ko est assez grand pour une image d'arrière-plan. J'ai vu pire, quelqu'un utilisant une image de 1Mo: même avec une connexion relativement rapide, je pouvais voir la charge de fond après les éléments de la page.
Vous pouvez charger l'image dans la page en tant qu'image de base64, puis elle sera déjà chargée avec la page.
Je suggère de faire l'image plus petite, 300k est plutôt grande pour l'arrière-plan d'un site imo. –