Quel est le moyen le plus efficace de masquer complètement un élément de votre page?

enter image description here

Situation

  • J'ai beaucoup de choses que je veux cacher.
  • Je leur demande en quelque sorte de se cacher, mais pas exactement comme je le souhaite intentionnellement.
  • Ils clignotent très rapidement pendant le chargement de ma page.
  • J'ai du mal à les cacher.

Mesures que j'ai prises

  • Tout d'abord, j'ai utilisé la fonction jQuery hide() . J'ai aimé, mais alors Je remarque que tous ces boutons clignotent pendant le chargement de la page. #Curious ???

  • Deuxièmement, j'ai appris que .css ("display", "none"); est plus rapide que hide() et j’ai donc essayé, et j’obtiens toujours le même résultat, peut-être plus vite, mais Je vois toujours le clignotement.

  • Troisièmement, certaines personnes prétendent que .attr ('disabled', true); est encore plus rapide et OUI que j'ai déjà essayé, et que ne fonctionne même pas du tout.

  • .attr ('disabled', true); est peut-être obsolète, puis j'utilise le dernier .prop ('disabled', true); et cela ne fonctionne toujours pas!

Je suis complètement désemparé maintenant. J'espère que quelqu'un pourra m'aider à mettre fin à cela.

Quel est le moyen le plus efficace de masquer complètement un élément de votre page?

1
Merci beaucoup les gars pour tous vos efforts. Je vais aller une tête et le faire maintenant.
ajouté l'auteur kyo, source
Merci beaucoup les gars pour tous vos efforts. Je vais aller une tête et le faire maintenant.
ajouté l'auteur kyo, source
Merci beaucoup les gars pour tous vos efforts. Je vais aller une tête et le faire maintenant.
ajouté l'auteur kyo, source
@bassxzero: Puis-je quand même les montrer, si j'utilise des CSS? Y a-t-il un moyen d'arrêter/d'empêcher le clignotement au début?
ajouté l'auteur kyo, source
@bassxzero: Puis-je quand même les montrer, si j'utilise des CSS? Y a-t-il un moyen d'arrêter/d'empêcher le clignotement au début?
ajouté l'auteur kyo, source
@bassxzero: Puis-je quand même les montrer, si j'utilise des CSS? Y a-t-il un moyen d'arrêter/d'empêcher le clignotement au début?
ajouté l'auteur kyo, source
@ druidicwyrm: S'il vous plaît corrigez-moi, si je me trompe. Je suis nouveau dans tous ces domaines. J'utilise jQuery hide() parce que je veux pouvoir les montrer à un moment donné. Je ne sais même pas quelle voie est la meilleure, pourvu que je puisse déclencher leur retour, je suis heureux. S'il vous plaît donnez votre avis.
ajouté l'auteur kyo, source
@ druidicwyrm: S'il vous plaît corrigez-moi, si je me trompe. Je suis nouveau dans tous ces domaines. J'utilise jQuery hide() parce que je veux pouvoir les montrer à un moment donné. Je ne sais même pas quelle voie est la meilleure, pourvu que je puisse déclencher leur retour, je suis heureux. S'il vous plaît donnez votre avis.
ajouté l'auteur kyo, source
@ druidicwyrm: S'il vous plaît corrigez-moi, si je me trompe. Je suis nouveau dans tous ces domaines. J'utilise jQuery hide() parce que je veux pouvoir les montrer à un moment donné. Je ne sais même pas quelle voie est la meilleure, pourvu que je puisse déclencher leur retour, je suis heureux. S'il vous plaît donnez votre avis.
ajouté l'auteur kyo, source
le plus efficace consiste à définir une classe de conteneur et à utiliser ainsi les règles CSS stockées dans C ++ pour rendre toute une collection arbitraire d'éléments cachés ou visibles. c'est BEAUCOUP plus rapide que de boucler dans JS et de manipuler le DOM pour chaque élément affecté. L'utilisation de CSS évite également le chargement de page gênant, car le CSS sera appliqué avant l'affichage du code HTML, alors que JS aurait besoin de charger jquery, puis d'exécuter tout le code, le tout après que la page était déjà visible.
ajouté l'auteur dandavis, source
le plus efficace consiste à définir une classe de conteneur et à utiliser ainsi les règles CSS stockées dans C ++ pour rendre toute une collection arbitraire d'éléments cachés ou visibles. c'est BEAUCOUP plus rapide que de boucler dans JS et de manipuler le DOM pour chaque élément affecté. L'utilisation de CSS évite également le chargement de page gênant, car le CSS sera appliqué avant l'affichage du code HTML, alors que JS aurait besoin de charger jquery, puis d'exécuter tout le code, le tout après que la page était déjà visible.
ajouté l'auteur dandavis, source
le plus efficace consiste à définir une classe de conteneur et à utiliser ainsi les règles CSS stockées dans C ++ pour rendre toute une collection arbitraire d'éléments cachés ou visibles. c'est BEAUCOUP plus rapide que de boucler dans JS et de manipuler le DOM pour chaque élément affecté. L'utilisation de CSS évite également le chargement de page gênant, car le CSS sera appliqué avant l'affichage du code HTML, alors que JS aurait besoin de charger jquery, puis d'exécuter tout le code, le tout après que la page était déjà visible.
ajouté l'auteur dandavis, source
le plus efficace consiste à définir une classe de conteneur et à utiliser ainsi les règles CSS stockées dans C ++ pour rendre toute une collection arbitraire d'éléments cachés ou visibles. c'est BEAUCOUP plus rapide que de boucler dans JS et de manipuler le DOM pour chaque élément affecté. L'utilisation de CSS évite également le chargement de page gênant, car le CSS sera appliqué avant l'affichage du code HTML, alors que JS aurait besoin de charger jquery, puis d'exécuter tout le code, le tout après que la page était déjà visible.
ajouté l'auteur dandavis, source
En cachant, vous voulez dire que cela n’existe même pas? Pour que le chargement de la page soit plus rapide?
ajouté l'auteur Ali Almoullim, source
@ rangerover.js "équivaut à peu près à appeler .css (" display "," none ")" " api.jquery .com/masquer . Donc, si oui, affichez aucun avec CSS puis appelez .show (); avec JQuery.
ajouté l'auteur bassxzero, source
@ rangerover.js "équivaut à peu près à appeler .css (" display "," none ")" " api.jquery .com/masquer . Donc, si oui, affichez aucun avec CSS puis appelez .show (); avec JQuery.
ajouté l'auteur bassxzero, source
@ rangerover.js "équivaut à peu près à appeler .css (" display "," none ")" " api.jquery .com/masquer . Donc, si oui, affichez aucun avec CSS puis appelez .show (); avec JQuery.
ajouté l'auteur bassxzero, source
Pouvons-nous voir un exemple? Vous n'êtes vraiment pas censé utiliser jQueryCSS est supposé partir. Cela signifie que si vous saviez que vous deviez masquer les éléments au chargement de la page, pourquoi ne pas utiliser CSS pour le faire?
ajouté l'auteur bassxzero, source
Pouvons-nous voir un exemple? Vous n'êtes vraiment pas censé utiliser jQueryCSS est supposé partir. Cela signifie que si vous saviez que vous deviez masquer les éléments au chargement de la page, pourquoi ne pas utiliser CSS pour le faire?
ajouté l'auteur bassxzero, source
Pouvons-nous voir un exemple? Vous n'êtes vraiment pas censé utiliser jQueryCSS est supposé partir. Cela signifie que si vous saviez que vous deviez masquer les éléments au chargement de la page, pourquoi ne pas utiliser CSS pour le faire?
ajouté l'auteur bassxzero, source
Vous pouvez ajouter l’affichage none aux boutons sans utiliser javascript. Y a-t-il une raison pour laquelle vous devez utiliser js?
ajouté l'auteur druidicwyrm, source
Vous pouvez ajouter l’affichage none aux boutons sans utiliser javascript. Y a-t-il une raison pour laquelle vous devez utiliser js?
ajouté l'auteur druidicwyrm, source
Vous pouvez ajouter l’affichage none aux boutons sans utiliser javascript. Y a-t-il une raison pour laquelle vous devez utiliser js?
ajouté l'auteur druidicwyrm, source

12 Réponses

Le délai observé correspond au temps nécessaire au navigateur pour télécharger et exécuter le script. La méthode JavaScript que vous utilisez pour définir l'affichage de : aucun sur les boutons n'a pas d'importance, il y aura toujours une délai (car le navigateur doit télécharger, analyser et exécuter le script).

La méthode le plus rapide consiste à ne pas utiliser JavaScript et à définir simplement display: none sur les boutons via CSS (en ligne ou dans une feuille de style) lors du rendu de la page.

1
ajouté
+1 Merci pour le tuyau, je vais certainement essayer. Si j’utilise les CSS en ligne, puis-je quand même les restituer si je le souhaite? J'espère que cela ne vous dérange pas de développer cela.
ajouté l'auteur kyo, source
@ rangerover.js - oui, basculer une classe sur l'élément (comme show-i et ajouter dans votre CSS la règle: .show-i {display: block! important;}
ajouté l'auteur Adam, source

Le délai observé correspond au temps nécessaire au navigateur pour télécharger et exécuter le script. La méthode JavaScript que vous utilisez pour définir l'affichage de : aucun sur les boutons n'a pas d'importance, il y aura toujours une délai (car le navigateur doit télécharger, analyser et exécuter le script).

La méthode le plus rapide consiste à ne pas utiliser JavaScript et à définir simplement display: none sur les boutons via CSS (en ligne ou dans une feuille de style) lors du rendu de la page.

1
ajouté
+1 Merci pour le tuyau, je vais certainement essayer. Si j’utilise les CSS en ligne, puis-je quand même les restituer si je le souhaite? J'espère que cela ne vous dérange pas de développer cela.
ajouté l'auteur kyo, source
@ rangerover.js - oui, basculer une classe sur l'élément (comme show-i et ajouter dans votre CSS la règle: .show-i {display: block! important;}
ajouté l'auteur Adam, source

Le délai observé correspond au temps nécessaire au navigateur pour télécharger et exécuter le script. La méthode JavaScript que vous utilisez pour définir l'affichage de : aucun sur les boutons n'a pas d'importance, il y aura toujours une délai (car le navigateur doit télécharger, analyser et exécuter le script).

La méthode le plus rapide consiste à ne pas utiliser JavaScript et à définir simplement display: none sur les boutons via CSS (en ligne ou dans une feuille de style) lors du rendu de la page.

1
ajouté
+1 Merci pour le tuyau, je vais certainement essayer. Si j’utilise les CSS en ligne, puis-je quand même les restituer si je le souhaite? J'espère que cela ne vous dérange pas de développer cela.
ajouté l'auteur kyo, source
@ rangerover.js - oui, basculer une classe sur l'élément (comme show-i et ajouter dans votre CSS la règle: .show-i {display: block! important;}
ajouté l'auteur Adam, source

Le délai observé correspond au temps nécessaire au navigateur pour télécharger et exécuter le script. La méthode JavaScript que vous utilisez pour définir l'affichage de : aucun sur les boutons n'a pas d'importance, il y aura toujours une délai (car le navigateur doit télécharger, analyser et exécuter le script).

La méthode le plus rapide consiste à ne pas utiliser JavaScript et à définir simplement display: none sur les boutons via CSS (en ligne ou dans une feuille de style) lors du rendu de la page.

1
ajouté
+1 Merci pour le tuyau, je vais certainement essayer. Si j’utilise les CSS en ligne, puis-je quand même les restituer si je le souhaite? J'espère que cela ne vous dérange pas de développer cela.
ajouté l'auteur kyo, source
@ rangerover.js - oui, basculer une classe sur l'élément (comme show-i et ajouter dans votre CSS la règle: .show-i {display: block! important;}
ajouté l'auteur Adam, source

À partir de html5, il existe un nouvel attribut hidden qui contrôle si un élément est affiché ou non. Vous devriez probablement ajouter ceci aux éléments. De cette façon, les éléments sont masqués en même temps que le code HTML est analysé et il n’ya pas de délai.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Cependant, si vous ajoutez l'attribut avec jquery, le délai sera toujours là, car il y aura un délai entre le moment où le code HTML est affiché et le moment où le code JS est chargé et exécuté.

Note: cela ne fonctionne que dans IE 11+

1
ajouté
C'est nouveau, jamais entendu parler de cela. Puis-je le faire en utilisant jQuery? Pouvez-vous ajouter cela dans votre réponse? Les gens aimeront peut-être votre solution plus tard.
ajouté l'auteur kyo, source

À partir de html5, il existe un nouvel attribut hidden qui contrôle si un élément est affiché ou non. Vous devriez probablement ajouter ceci aux éléments. De cette façon, les éléments sont masqués en même temps que le code HTML est analysé et il n’ya pas de délai.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Cependant, si vous ajoutez l'attribut avec jquery, le délai sera toujours là, car il y aura un délai entre le moment où le code HTML est affiché et le moment où le code JS est chargé et exécuté.

Note: cela ne fonctionne que dans IE 11+

1
ajouté
C'est nouveau, jamais entendu parler de cela. Puis-je le faire en utilisant jQuery? Pouvez-vous ajouter cela dans votre réponse? Les gens aimeront peut-être votre solution plus tard.
ajouté l'auteur kyo, source

À partir de html5, il existe un nouvel attribut hidden qui contrôle si un élément est affiché ou non. Vous devriez probablement ajouter ceci aux éléments. De cette façon, les éléments sont masqués en même temps que le code HTML est analysé et il n’ya pas de délai.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Cependant, si vous ajoutez l'attribut avec jquery, le délai sera toujours là, car il y aura un délai entre le moment où le code HTML est affiché et le moment où le code JS est chargé et exécuté.

Note: cela ne fonctionne que dans IE 11+

1
ajouté
C'est nouveau, jamais entendu parler de cela. Puis-je le faire en utilisant jQuery? Pouvez-vous ajouter cela dans votre réponse? Les gens aimeront peut-être votre solution plus tard.
ajouté l'auteur kyo, source

À partir de html5, il existe un nouvel attribut hidden qui contrôle si un élément est affiché ou non. Vous devriez probablement ajouter ceci aux éléments. De cette façon, les éléments sont masqués en même temps que le code HTML est analysé et il n’ya pas de délai.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Cependant, si vous ajoutez l'attribut avec jquery, le délai sera toujours là, car il y aura un délai entre le moment où le code HTML est affiché et le moment où le code JS est chargé et exécuté.

Note: cela ne fonctionne que dans IE 11+

1
ajouté
C'est nouveau, jamais entendu parler de cela. Puis-je le faire en utilisant jQuery? Pouvez-vous ajouter cela dans votre réponse? Les gens aimeront peut-être votre solution plus tard.
ajouté l'auteur kyo, source

Premièrement, hide() et .css ('display', 'none') sont pratiquement équivalents. Le flash se produit en raison du temps nécessaire pour télécharger et exécuter le script après le chargement initial de la page.

Bien sûr, le moyen le plus rapide de masquer les boutons est de les supprimer complètement du balisage HTML. :)

En supposant toutefois que vous ne souhaitiez pas supprimer les boutons du balisage et que vous souhaitiez peut-être à un moment quelconque afficher les boutons par programmation, vous souhaiterez les masquer dès le début avec CSS:

button {
  display: none;
}

(L'attribut disabled permet simplement à l'utilisateur de ne pas interagir avec le bouton des navigateurs prenant en charge cet attribut. ne ne masque pas l'élément.)

1
ajouté
Merci pour l'explication simple, et le pourboire.
ajouté l'auteur kyo, source

Premièrement, hide() et .css ('display', 'none') sont pratiquement équivalents. Le flash se produit en raison du temps nécessaire pour télécharger et exécuter le script après le chargement initial de la page.

Bien sûr, le moyen le plus rapide de masquer les boutons est de les supprimer complètement du balisage HTML. :)

En supposant toutefois que vous ne souhaitiez pas supprimer les boutons du balisage et que vous souhaitiez peut-être à un moment quelconque afficher les boutons par programmation, vous souhaiterez les masquer dès le début avec CSS:

button {
  display: none;
}

(L'attribut disabled permet simplement à l'utilisateur de ne pas interagir avec le bouton des navigateurs prenant en charge cet attribut. ne ne masque pas l'élément.)

1
ajouté
Merci pour l'explication simple, et le pourboire.
ajouté l'auteur kyo, source

Premièrement, hide() et .css ('display', 'none') sont pratiquement équivalents. Le flash se produit en raison du temps nécessaire pour télécharger et exécuter le script après le chargement initial de la page.

Bien sûr, le moyen le plus rapide de masquer les boutons est de les supprimer complètement du balisage HTML. :)

En supposant toutefois que vous ne souhaitiez pas supprimer les boutons du balisage et que vous souhaitiez peut-être à un moment quelconque afficher les boutons par programmation, vous souhaiterez les masquer dès le début avec CSS:

button {
  display: none;
}

(L'attribut disabled permet simplement à l'utilisateur de ne pas interagir avec le bouton des navigateurs prenant en charge cet attribut. ne ne masque pas l'élément.)

1
ajouté
Merci pour l'explication simple, et le pourboire.
ajouté l'auteur kyo, source

Premièrement, hide() et .css ('display', 'none') sont pratiquement équivalents. Le flash se produit en raison du temps nécessaire pour télécharger et exécuter le script après le chargement initial de la page.

Bien sûr, le moyen le plus rapide de masquer les boutons est de les supprimer complètement du balisage HTML. :)

En supposant toutefois que vous ne souhaitiez pas supprimer les boutons du balisage et que vous souhaitiez peut-être à un moment quelconque afficher les boutons par programmation, vous souhaiterez les masquer dès le début avec CSS:

button {
  display: none;
}

(L'attribut disabled permet simplement à l'utilisateur de ne pas interagir avec le bouton des navigateurs prenant en charge cet attribut. ne ne masque pas l'élément.)

1
ajouté
Merci pour l'explication simple, et le pourboire.
ajouté l'auteur kyo, source