2010-07-08 6 views
1

J'ai un site qui utilise des images d'arrière-plan volumineuses (60-100k) qui varient d'une page à l'autre.Précharge en douceur des images d'arrière-plan volumineuses

Lorsque l'utilisateur charge la page pour la première fois, le contenu de la page est chargé en premier et l'image d'arrière-plan apparaît peu de temps après. C'est, je le comprends, le comportement prévu dans les navigateurs, mais cela rend le chargement de la page assez "cahoteux" sur les connexions plus lentes.

J'avais pensé à cacher la page avec un "masque" de chargement qui est enlevé par JS quand l'image de fond s'est chargée ... mais c'est encore une approche assez moche.

Comment faire en sorte que le contenu de la page et l'image de fond apparaissent à l'utilisateur en même temps?

Répondre

1

Une meilleure façon serait probablement d'utiliser jquery et de fondre l'image d'arrière-plan une fois qu'elle a été chargée. Vous pouvez également essayer de précharger l'image suivante avant que l'utilisateur ne clique sur la page suivante pour la rendre encore plus lisse.

Si vous retardez l'affichage du contenu jusqu'à ce que l'image s'affiche, cela irrite vos utilisateurs. Ils sont (probablement) là principalement pour l'information donc ne touchez jamais à rien qui retarde ce processus. L'exception pour cela est un site Web arty farty où les gens qui ne connaissent pas les sites Web viennent à cliquer sur des choses et ils ne se soucient de rien en dehors de cela joli.

+0

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. –

+0

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

4

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.

1

Vous pouvez utiliser data URIs pour atténuer ce problème dans les navigateurs modernes et revenir à votre technique actuelle pour IE 6/7.