La meilleure solution ici serait d'essayer de trouver une façon de réduire cette image. Il existe de bons outils de compression. Je recommande de regarder ImageMagick, certains outils spécifiques JPEG (http://jpegclub.org/) ou des outils spécifiques au PNG (http://www.aboutonlinetips.com/optimize-and-compress-png-files/).
Mais pour faire ce que vous spécifiquement demander - tout cacher sur la page jusqu'à ce qu'il soit prêt, puis l'ont charger dans - vous pouvez utiliser jQuery et faire quelque chose comme ceci:
$(function(){
var bgimage = new Image();
bgimage.src="{your giant image's URL goes here}";
$(bgimage).load(function(){
$("body").css("background-image","url("+$(this).attr("src")+")").fadeIn();
});
});
Ce que cela fait est il attend jusqu'à ce que tous les éléments soient chargés sur la page, puis crée un nouvel objet Image. Nous dirigeons la source vers votre fichier d'image plus grand. Lorsque le chargement est terminé, nous changeons l'arrière-plan pour utiliser cette image nouvellement chargée, qui devrait être chargée instantanément car le navigateur la met en cache.
J'ai fadeIn() là au cas où vous voulez cacher tout le contenu de la page jusqu'à ce qu'il soit prêt. Cela signifie que vous devriez faire le caché.
Pour une raison quelconque, fadeIn() fonctionne mieux que show() ou supprime simplement une classe "cachée" via removeClass(), si vous utilisez cette approche. Avec ces deux dernières approches, la balise semble redimensionner sa hauteur pour s'adapter au contenu de la page, ce qui peut conduire à ne pas afficher l'image d'arrière-plan dans son intégralité.
Honnêtement, je ne recommande pas vraiment cette approche: p
Au moins, pas si vous allez cacher tout le contenu de la page jusqu'à ce qu'il soit prêt.
Cela pourrait être une bonne approche pour afficher l'image d'arrière-plan uniquement quand il est prêt, ce qui évite l'image partiellement chargée en cours d'affichage ...
Une charge plus lente est juste le payer pour l'utilisation de grandes images.
100k image de fond semble un peu arty farty pour moi. Je voudrais faire la couleur de fond du corps semblable à l'image de fond. Ensuite, l'utilisateur pourrait commencer à utiliser le site Web. Le pré-chargement de toutes les images d'arrière-plan est probablement la meilleure idée. –
ouais il est tout à fait un créatif arty farty pour être honnête. Il y a environ 30 images d'arrière-plan distinctes et aucun moyen de savoir lequel de l'utilisateur ira à la prochaine, donc le préchargement est un peu un non-démarreur je pense? Votre idée de fondre dans l'image d'arrière-plan semble assez agréable, mais je pense que nous allons utiliser cela, à la vôtre. – jsims281