JQuery Onglets Masquer Jusqu'à Chargement

Question

Je utilise jQuery UI Tabs pour contrôler la présentation du contenu sur une page de portfolio que je mets en œuvre. La page est composée de nombreuses grandes images et les onglets prennent environ une seconde ou deux pour se charger complètement. Je veux savoir s'il y a un moyen de masquer/tamponner tout le contenu jusqu'à ce que les onglets soient chargés. Idéalement, je voudrais qu'un graphique de chargement apparaisse jusqu'à ce que les onglets soient chargés.

Veuillez me conseiller.

Merci, Brad

Answer 1

$(document).ready est utilisé lorsque le DOM est entièrement chargé mais pas le contenu. Ce que vous voudrez faire, c'est de définir la div des onglets sur display:none en css jusqu'à ce que les images soient entièrement chargées. En JavaScript classique, nous avions l'habitude d'utiliser la fonction .onload(). Vous devrez utiliser ceci et quand cela se déclenche, vous définirez la div des onglets sur display:block (ou utilisez .show() de jQuery). Pour le graphique d'attente, utilisez un spinner dans une div dont le css est display:block. Ensuite, dans la fonction onload(), utilisez .hide() de jQuery.