Chargement lent des images, meilleur moyen d'afficher une image temporaire? JQuery peut-être?

Question

J'utilise les graphiques Google pour afficher des graphiques dans mon application. Parfois, Google est lent et les graphiques vont prendre un certain temps à charger. Ce scénario semble être un modèle assez commun - je me demande donc quelle est la bonne approche pour montrer une image temporaire, alors que l'image est fournie par Google. J'ai accès à jQuery - et j'ai vu un certain nombre de plugins de "préchargement". Est-ce ce dont j'ai besoin?

Le terme correct pour ce scénario/motif est-il vraiment appelé "préchargement d'image"? Je voudrais entendre ce que les gens utilisent pour résoudre cette situation.

grâce

Answer 1

Vous pouvez afficher un de ces gifs de chargement fantaisie trouvés au http://ajaxload.info/ pendant le chargement de l'image. Une fois l'image chargée, vous masquez le gif de chargement et affichez l'image elle-même.

vérifiez http://jqueryfordesigners.com/image-loading/ pour un didacticiel.

Answer 2

préchargement de l'image est généralement lorsque vous téléchargez des images en prévision de leur demande, mais avant que l'utilisateur fait en fait une demande de les voir. Je crois que la pensée actuelle est que cela ajoute généralement des frais généraux sauf si un très grand pourcentage de vos utilisateurs peuvent s'attendre à voir l'image.

Answer 3

Les images ont un événement onload qui se déclenchera une fois le chargement de l'image terminé.

Vous pouvez écouter cet événement et, jusqu'à ce qu'il se déclenche, afficher une autre image.

<script> 
function showImage() { 
    $("#blah").show(); 
    $("#temp").hide(); 
} 
</script> 

<img id="temp" src="temp_image.png" /> 
<img id="blah" src="blah.png" onload="showImage();" style="display:none;"/> 

Answer 4

Non, vous ne voulez pas précharger (cela suppose de caler le chargement de la page pendant le chargement des images). vous devez afficher un graphique de chargement.

$(.loading).css({ 
    'background-image':'myLoading.gif', 
    'background-repeat: 'no-repeat', 
    height: 25, 
    width: 25 
}).load(function(){ 
    $(this.css({ 
    'background-image': null, 
    height: 'auto', 
    width: 'auto' 
    }); 
}); 

Ou quelque chose à cet effet ... Note hauteur et la largeur devrait être la taille de l'image loaing ... à moins que vous connaissez la taille de l'image que vous êtes en tirant vers le bas.

Answer 5

Le préchargement n'est pas la solution. Si votre image est directement visible dans votre application, votre navigateur la chargera le plus rapidement possible et ne pourra pas le charger plus rapidement en utilisant Javascript.

Ce que vous pouvez faire est de le charger plus lentement.

Vous semblez considérer que le chargement de l'image est lent car vous voulez qu'il soit immédiat. Difficile d'être plus rapide qu'immédiat.

Peut-être que vous pouvez essayer dans l'autre sens. Concevez votre application de sorte que le graphique s'affiche lorsque l'utilisateur interagit avec quelque chose (cliquez sur un bouton, un lien, etc.), puis chargez le graphique à chaque fois que l'utilisateur le demande.

Je vois 2 avantages à cela, principalement pour les utilisateurs à faible bande passante (utilisateurs mobiles?):

• utilisateurs qui ne veulent pas le tableau ne seront pas perturbés par son long processus de chargement
  • vous savez comme la mise en page changeant en image est chargée
• la bande passante initiale l'utilisation de votre application sera plus faible ce qui la rendra plus réactive
  • moins d'images à charger au départ, plus vite le navigateur sera prêt

Idée sans vergogne volée AppleInsider-version mobile

Answer 6

charge de solution intuitive (très) grande image. Par exemple:

1. miniatures sont 100 x 75, de grandes images pour charger la taille 960x720,
2. miniature onClick - nous commençons load('/images/audi_big.jpg') grande image,
3. après que de remplacer l'image oryginal $("#big_image img").attr({src: '/images/audi_120px.jpg'}); et nous avons miniature width = "960".
4. Sur cette couche ajouter en option avec des informations LOADING {CSS}z-index: 1,
5. si grande image chargée le faire: $("#big_image img").attr({src: '/images/audi_big.jpg'});