Pré-charger et mettre en cache l'image dans jQuery pour l'icône "chargement" (ou toute autre solution)

Question

Je travaille avec dynamic tabs dans jQuery. Lorsque l'utilisateur ouvre est chargé un nouvel onglet, le contenu via ajax:

function addTab(tabId) { 
    $("#tabs").tabs('add', tabId, tabId); 
    $(tabId).load("..."); 
} 

Je veux afficher une icône de chargement alors que le contenu est en cours de chargement. Donc, je suis en train le contenu du panneau onglet dans le ajouter propriété de la méthode onglets:

var $tabs = $("#tabs").tabs({ 
     tabTemplate: '<li><a href="#{href}">#{label}</a></li>', 
     add: function(event, ui) { 
      $(ui.panel).append('<div>loading...</div>'); 
     } 
    }); 

Cela fonctionne beaucoup jusqu'à présent, le contenu de l'onglet est créé montrant « chargement ... » puis remplacé par le contenu approprié quand il a été récupéré.

Ce que je voudrais faire est de montrer l'une des images de chargement animées. Évidemment, si je dois télécharger cette image à chaque fois, cela va à l'encontre du but.

Je pense que j'ai besoin de charger en arrière-plan l'image en mémoire sur $ (document) .ready puis de mettre cette image dans mes divs de chargement chaque fois qu'ils sont nécessaires en quelque sorte. Je n'ai aucune idée de comment y arriver. Ou peut-être y a-t-il une solution beaucoup plus simple et meilleure? Notez qu'il peut y avoir plusieurs onglets de chargement en même temps, et tous les onglets de chargement ne sont pas visibles (un nouvel onglet peut être chargé en arrière-plan sans quitter l'onglet en cours), donc juste avoir un div partagé que je montre/cache en plus de tout le reste ne fonctionne pas.

Tous les pointeurs sont appréciés, merci.

Answer 1

Cela pourrait aider:

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

aussi, si vous ne possédez pas déjà une icône de chargement animée, ceci est une excellente ressource:

http://ajaxload.info/