jQuery et CSS -> reporter l'affichage

Question

J'ai un carrousel implémenté avec jQuery.

Parfois, j'ai d'autres éléments sur la page qui peuvent prendre un certain temps à charger et ce qui se passe est que le carrousel commence à s'afficher sans que son rendu CSS soit OK. Cela donne une rangée de toutes les images dans le carrousel qui s'affiche sur la page. Donnez-lui ~ 0.2 sec et tout va bien, c'est-à-dire que le CSS entre en jeu et que le carrousel s'affiche correctement. Ma question est de savoir s'il y a un moyen de contourner cela ou même un moyen "standard" de retarder l'affichage du carrousel jusqu'à ce que nous soyons certains que le reste de la page est chargé.

Le carrousel est déjà configuré pour charger sur document.ready.

Answer 1

Vous n'avez rien dit sur la façon dont le carrousel est mis en œuvre; à quoi ressemble le code html, quel plugin jquery utilisez-vous et à quoi ressemble le css, il est donc difficile de répondre à la question.

Il semble que vous convertissiez les balises d'image de la page dans le carrousel en utilisant jquery. Si toutes les images sont à l'intérieur de la même div, cachez simplement la div en utilisant display: hidden. Si vous souhaitez qu'ils soient masqués avant le chargement de la css, vous devez appliquer ce paramètre css directement à la balise div en tant qu'attribut.

Une meilleure solution consiste à ajouter les images en utilisant javascript/jquery après le chargement de la page. De cette façon, ils ne sont pas rendus en ligne avant que le css ou jquery ne soit prêt.

Answer 2

Si vous ajoutez toutes les images avec javascript, elles n'affichent rien du tout pour les utilisateurs qui ont javascript désactivé. Ainsi, si votre carrousel s'affiche trop tôt, vous devrez peut-être déplacer le script qui appelle votre carrousel au bas de la page.

Answer 3

à la page charge ajouter js classe au corps,

ne pas limiter le carrousel uniquement aux utilisateurs avec le javascript activé, referene ces images avec

.js .imgParent > img { 
    display: none 
} 

vous pouvez rereference ces images dans votre javascript et les utilisateurs (Réactivez sans javascript seront affichés régulièrement des images)