2012-10-22 6 views
1

Ceci est mon site: http://justxp.plutohost.net/jonydesigns/index.phppréchargement

Comme vous le voyez les images de menu sauter lorsque vous passez la souris sur eux parce que les images de vol stationnaire n'a pas encore changé ou chargeur.

et les images dans l'ensemble.

Je veux faire un preloader qui montre une icône loading.gif tout en chargeant la page, une fois chargée, affichez simplement la page ou fondez sur la page.

Y a-t-il des didacticiels de préchargement pour cela? J'ai googled préchargeurs de site Web, tout ce que j'ai trouvé était des barres de préchargement css personnalisé, et des préchargeurs pour spécifier les images.

J'ai besoin d'un préchargeur pour l'ensemble du site.

Est-ce que quelqu'un sait où je peux en trouver un? Merci!

+0

vous pouvez essayer charge jquery: http://api.jquery.com/load/ –

+0

vous devez utiliser sprites . Attendez, au second coup d'oeil, utilisez-vous des images de texte? Je ne sais pas comment expliquer à quel point c'est faux - le texte est la seule chose pour laquelle Internet est génial! Les images de texte sont à peu près toujours la mauvaise chose à faire, à moins que ce soit super fantaisiste (votre partie animée principale tombe dans le cas d'utilisation "assez juste"!) –

+0

En fait, le CSS concernant cette navigation entière est assez bizarre - vous avez une transition place des tas de fois, au lieu d'une seule fois sur '#menu div'. En outre, ms-transition n'est pas nécessaire. Cela devrait rendre le CSS un peu plus concis! –

Répondre

1

Pour précharger les images, il suffit de mettre dans votre initialisation (vous ne devez pas attendre document.ready pour exécuter ce):

var img1 = new Image(); 
img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png"; 
var img2 = new Image(); 
img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png" 

ou (jQuery:)

$.preloadImages = function() 
{ 
    for(var i = 0; i<arguments.length; i++) 
    { 
    jQuery("<img />", {style:'display:none'}).attr("src", arguments[i]); 
    } 
} 

Utilisation:

$.preloadImages("img2_thumb.jpg", "img1_thumb.jpg", "img3_thumb.jpg"); 

ofcourse- les images devraient être les images en vol stationnaire.

+0

Merci! aidé ^^ – user1761494

0

Pour les bannières Top, vous devez précharger les images: http://rah1x.tumblr.com/post/32390880686/pre-load-images

Pour le reste du site, où vous voulez charger l'image pendant le chargement d'image, voici quelque chose que vous obtiendrez started.This fonctionne pour l'image individuelle, cependant, vous pouvez simplement le faire comme un événement pour la charge d'image en utilisant jquery: http://rah1x.tumblr.com/post/32450670309/show-loading-while-image-src-changes