jQuery Girl
  1. jQuery Girl
  3. Comment retarder l’affichage du texte HTML jusqu’au chargement de l’image-object de l’image d’arrière-plan?
Intereting Posts
avant le déchargement ignore la condition Récupère l’identifiant des éléments supprimés au lieu de l’identifiant cible Comment supprimer l’élément de la liste déroulante correspondant au texte actuellement saisi à l’aide du plugin jQuery Select2? jQuery val refuse de renvoyer une entrée non numérique à partir d’un champ numérique (Sous Chrome) Effacer les entrées si ce n’est pas une adresse email en utilisant Javascript ou jquery Conserver l’état actif css après clic avec jQuery Slick slider mauvaise largeur lors de l’initialisation annuler une soumission dans jQuery? JQuery Colorbox Remplacer la fonction .load de jQuery Sauvegarde des données de jQuery Drag Drop Remplacez javascript jquery La commutation dynamic de l’image d’arrière-plan ne fonctionne pas dans IE Téléchargement de fichier Ajax (avec Iframe) renvoyant et utilisant le nom de fichier pour des actions supplémentaires jQuery – Comment puis-je placer une DIV sur une superposition?

Comment retarder l’affichage du texte HTML jusqu’au chargement de l’image-object de l’image d’arrière-plan?

Je ne pense pas que vous puissiez attacher un événement de chargement spécifiquement pour les images d’arrière-plan.

Essayez ceci à la place:

.button li éléments .button li display:none : 

 .buttons li { display:none; background-image: url(images/sprite.png); height:126px; width:293px; float:left; margin:0 0 0 9px; }

Ensuite, dans votre jQuery, créez une image avec l’URL de votre sprite, et attachez-lui un gestionnaire de load qui affichera les boutons. 

 $(function() { // create a dummy image var img = new Image(); // give it a single load handler $(img).one('load',function() { $('.buttons li').fadeIn(); // fade in the elements when the image loads }); // give it the src of your background image img.src = "images/sprite.png"; // make sure if fires in case it was cached if( img.complete ) $(img).load(); });

Je pense que vous êtes sur la bonne voie. La fonction de chargement de JQuery s’exécute une fois le chargement de l’élément sélectionné terminé, ce qui signifie que tout le contenu est téléchargé. La chose est avec votre code, le balisage de bouton sera téléchargé avant que le contenu soit téléchargé. Vous pouvez donc utiliser jQuery pour révéler complètement les boutons avec un événement de chargement. Alors, configurez vos boutons pour qu’ils soient cachés dans votre CSS (visibilité: caché). Ensuite, utilisez le fichier $ (document) .load (function () {}) pour afficher les boutons: 

 $(window).load(function(){ $('.button').css({visibility: 'visible'}); })

écrivez votre code à l’intérieur 

 $(document).ready(function(){ //your logic here });

Cela garantit que votre manipulation DOM commence après que votre DOM soit entièrement logé …

en plus vous pouvez aussi utiliser 

 $("#yourDOMelementID").ready(function(){ });

pour s’assurer que l’élément souhaité est prêt à être manipulé …

de plus pour retarder un gestionnaire d’événements, vous pouvez utiliser .setTimeOut() ou, dans certains cas, .delay()

Définissez les boutons à masquer initialement, puis chargez jQuery sur le li, car c’est à cela que l’image d’arrière-plan est appliquée: 

 $('.buttons li').load(function() { $('.buttons').show(); });