Chaque didacticiel de développement de site Web réactif recommande d’utiliser la propriété CSS display:none pour masquer le chargement du contenu sur les navigateurs mobiles afin que le site Web se charge plus rapidement. Est-ce vrai? Affiche-t-il display:none ne charge les images ou charge-t-il toujours le contenu sur le navigateur mobile? Est-il possible d’empêcher le chargement de contenu inutile sur les navigateurs mobiles?
Ces images sont chargées. Le navigateur, en raison de la possibilité qu’un script vérifie dynamicment un élément du DOM, n’optimise pas les éléments (ou le contenu des éléments).
L’image a un display:none style mais sa taille est lue par le script. Vous pourriez également l’avoir vérifié en consultant l’onglet “réseau” des outils de développement de votre navigateur.
Notez que si le navigateur est sur un petit ordinateur, ne pas avoir à rendre l’image (et la mise en page de la page) rendra l’opération de rendu plus rapide, mais je doute que cela ait un sens aujourd’hui.
Si vous souhaitez empêcher le chargement de l’image, vous pouvez simplement ne pas append l’élément IMG à votre document (ou définir l’atsortingbut src IMG sur "data:" ou "about:blank" ).
MODIFIER :
Les navigateurs deviennent plus intelligents. Aujourd’hui, votre navigateur (en fonction de la version) peut ignorer le chargement de l’image s’il peut déterminer que ce n’est pas utile.
Si vous faites de l’image une image d’arrière-plan d’une div dans CSS, lorsque cette div est définie sur “display: none”, l’image ne se chargera pas. Lorsque CSS est désactivé, il ne sera toujours pas chargé car, bien sûr, CSS est désactivé.
La réponse n’est pas aussi simple qu’un simple oui ou non. Découvrez les résultats d’un test que j’ai récemment effectué:
Dans Chrome: Tous les 8 screenshot- * images chargées (img 1)
Dans Firefox: Seule l’image 1 screenshot- * chargée qui est actuellement affichée (img 2)
Donc après avoir creusé plus loin, j’ai trouvé ceci , ce qui explique comment chaque navigateur gère le chargement des actifs img en fonction de l’affichage CSS: none;
Extrait du billet de blog:
Chrome et Safari (WebKit): WebKit télécharge le fichier à chaque fois, sauf lorsqu’un arrière-plan est appliqué via une requête multimédia non correspondante.
Firefox: Firefox ne télécharge pas l’image appelée avec une image d’arrière-plan si les styles sont masqués, mais ils téléchargent toujours des actifs à partir de balises img.
Opéra: Comme Firefox, Opera ne charge pas les images d’arrière-plan inutiles.
Internet Explorer: IE, comme WebKit, téléchargera des images de fond même si elles sont affichées: aucune; Quelque chose d’étrange apparaît avec IE6: Eléments avec une image d’arrière-plan et un affichage: aucun défini en ligne ne sera téléchargé … Mais ils le seront si ces styles ne sont pas appliqués en ligne.
La HTML5 vous aidera à résoudre la source d’image en fonction de la largeur de l’écran
Apparemment, le comportement des navigateurs n’a pas beaucoup évolué au cours des cinq dernières années et beaucoup d’entre eux téléchargeraient encore les images cachées, même s’il y avait un display: none propriété n’y était display: none .
Même s’il existe une solution de contournement aux requêtes multimédias , elle ne peut être utile que si l’image a été définie en tant qu’arrière-plan dans le CSS.
Alors que je pensais qu’il y avait juste une solution JS au problème ( chargement paresseux , picturefill , etc.), il est apparu qu’il y avait une belle solution HTML pure qui sortait de la boîte avec HTML5.
Et c’est la .
Voici comment MDN le décrit:
L’ élément HTML est un conteneur utilisé pour spécifier plusieurs éléments pour un spécifique qu’il contient. Le navigateur choisira la source la plus appropriée en fonction de la disposition actuelle de la page (les contraintes de la boîte dans laquelle l’image apparaîtra) et de l’appareil sur lequel elle sera affichée (par exemple, un périphérique normal ou hiDPI).
Et voici comment l’utiliser:
La logique derrière
Le navigateur ne chargerait la source de la balise img que si aucune des règles de support ne s’applique. Lorsque l’élément n’est pas pris en charge par le navigateur, il affichera à nouveau la balise img .
Normalement, vous placeriez la plus petite image comme source du et ne chargeriez donc pas les images lourdes pour les écrans plus grands. Inversement, si une règle de support s’applique, la source du ne sera pas téléchargée, mais le contenu de l’URL de la correspondante sera téléchargé.
Le seul inconvénient ici est que si l’élément n’est pas supporté par le navigateur, il ne fera que charger la petite image. En revanche, en 2017, nous devrions penser et coder dans la première approche mobile .
Et avant que quelqu’un ne soit trop sorti, voici le support actuel du navigateur pour :
Les navigateurs de bureau
Navigateurs mobiles
Plus d’informations sur le support du navigateur que vous pouvez trouver sur Puis-je utiliser .
La bonne chose est que la phrase de html5please est de l’ utiliser avec un repli . Et je compte personnellement prendre leurs conseils.
Plus d’informations sur l’étiquette que vous pouvez trouver dans les spécifications du W3C . Il y a un avertissement là-bas, que je trouve important de mentionner:
L’élément picture est quelque peu différent audio éléments audio et video similaires. Bien que tous contiennent des éléments source , l’atsortingbut src l’élément source n’a aucune signification lorsque l’élément est nested dans un élément d’ picture et que l’algorithme de sélection de ressource est différent. De plus, l’élément d’ picture lui-même n’affiche rien; il fournit simplement un contexte pour son élément img contenu qui lui permet de choisir parmi plusieurs URL.
Donc, cela signifie que cela ne fait que vous aider à améliorer les performances lors du chargement d’une image, en lui fournissant un certain contexte.
Quoi qu’il en soit, vous pouvez toujours essayer de faire un piratage pour cacher l’image sur les petits appareils:
Ainsi, le navigateur n’affiche pas l’image et ne télécharge que l’image de 1×1 pixel, qui peut être mise en cache si vous l’utilisez plus d’une fois. Quoi qu’il en soit, il n’est vraiment pas recommandé de le faire car si le tag n’est pas supporté, même les navigateurs de bureau ne montreront que l’image 1x1px.
Oui, il sera rendu plus rapidement, légèrement, car il n’a pas besoin de rendre l’image et est un élément de moins à sortinger à l’écran.
Si vous ne voulez pas qu’il soit chargé, laissez une DIV vide où vous pouvez y charger plus tard du HTML contenant une .
Essayez d’utiliser firebug ou wireshark comme je l’ai déjà mentionné et vous verrez que les fichiers sont transférés même s’ils sont display:none n’est présent.
Opera est le seul navigateur qui ne charge pas l’image si l’affichage est défini sur none. Opera est maintenant passé à webkit et rendra toutes les images même si leur affichage est défini sur none.
Lorsque l’image est display: none ou à l’intérieur d’un élément avec display:none , le navigateur peut choisir de ne pas télécharger l’image jusqu’à ce que l’ display soit défini sur une autre valeur.
Seul Opera télécharge l’image lorsque vous changez l’ display pour block . Tous les autres navigateurs le téléchargent immédiatement.
Si vous faites de l’image une image d’arrière-plan d’une div dans CSS, lorsque cette div est définie sur “display: none”, l’image ne se chargera pas.
Il suffit de développer la solution de Brent.
Vous pouvez faire ce qui suit pour une solution CSS pure, cela permet aussi à la boîte img de se comporter comme une boîte d’img dans un paramètre de conception réactif (c’est ce que le png transparent est), particulièrement utile si votre conception utilise dynamicment redimensionnement des images.
L’image ne sera chargée que lorsque la requête multimédia liée à visible-lg-block est déclenchée et affichée: aucune n’est modifiée pour afficher: block. Le png transparent permet au navigateur de définir des rapports hauteur / largeur appropriés pour votre bloc (et donc l’image d’arrière-plan) dans une conception fluide (hauteur: auto; largeur: 100%).
Donc, vous vous retrouvez avec quelque chose comme ce qui suit, pour 3 fenêtres différentes:
Et seules les images par défaut de la taille de la fenêtre d’affichage des médias se chargent pendant le chargement initial, puis, selon votre fenêtre d’affichage, les images se chargent dynamicment.
Et pas de javascript!
L’image d’arrière-plan d’un élément div se chargera si le div est défini do ‘display: none’.
Quoi qu’il en soit, si cette même div a un parent et que ce parent est défini sur ‘display: none’, l’image d’arrière-plan de l’élément enfant ne sera pas chargée . 🙂
Exemple utilisant bootstrap:
lg
md
sm
xs
Pour empêcher la récupération des ressources, utilisez l’ élément de Web Components .
Si oui, existe-t-il un moyen de ne pas charger le contenu inutile sur les navigateurs mobiles?
Une autre possibilité est d’utiliser une et de placer l’image dans la . Ensuite, utilisez javascript pour supprimer le tag noscript lorsque vous avez besoin de l’image. De cette façon, vous pouvez charger des images à la demande en utilisant l’amélioration progressive.
Utilisez ce polyfill que j’ai écrit pour lire le contenu des balises dans IE8
Utilisez @media query CSS. En gros, nous venons de publier un projet dans lequel nous avions une image énorme d’un arbre sur le bureau, mais pas dans les écrans de table / mobiles. Donc, empêcher l’image de charger son assez facile
Voici un petit extrait:
.tree { background: none top left no-repeat; } @media only screen and (min-width: 1200px) { .tree { background: url(enormous-tree.png) top left no-repeat; } }
Vous pouvez utiliser le même CSS pour afficher et masquer avec display / visibility / opacity, mais l’image était toujours en cours de chargement, c’était le code le plus sûr que nous ayons trouvé.
Salut les gars, je me débattais avec le même problème, comment ne pas charger une image sur le mobile.
Mais j’ai trouvé une bonne solution. Commencez par créer une balise img, puis chargez un svg vierge dans l’atsortingbut src. Maintenant, vous pouvez définir votre URL à l’image comme un style en ligne avec un contenu: URL («lien vers votre image») ;. Enveloppez maintenant votre balise img dans un wrapper de votre choix.
@media only screen and (max-width: 800px) { .test{ display: none; } }
Définissez le wrapper pour qu’il n’en affiche aucun sur le point d’arrêt où vous ne voulez pas charger l’image. Le css inline de la balise img est maintenant ignoré car le style d’un élément enveloppé dans un wrapper avec display none sera ignoré, par conséquent l’image n’est pas chargée jusqu’à ce que vous atteigniez un point d’arrêt où le wrapper possède un bloc d’affichage.
Voilà un moyen très simple de ne pas charger un img sur un point d’arrêt mobile 🙂
L’image sera chargée comme d’habitude et utilisera toujours la bande passante de l’utilisateur si vous envisagez d’économiser la bande passante de l’utilisateur du téléphone mobile. Vous pouvez utiliser la requête multimédia et filtrer les appareils que vous souhaitez que votre image soit chargée. image doit être définie comme une image d’arrière-plan d’un div, etc et PAS une balise puisque la balise image chargera l’image indépendamment du fait que la taille de l’écran et la requête de média définie.
nous parlons d’images ne se chargeant pas sur le mobile, non? alors que faire si vous avez juste fait un @media (min-width: 400px) {background-image: thing.jpg}
ne chercherait-il alors que l’image au-dessus d’une certaine largeur d’écran?
L’astuce pour utiliser display: none avec des images consiste à leur atsortingbuer un identifiant. Il n’y a pas beaucoup de code nécessaire pour que cela fonctionne. Voici un exemple d’utilisation de requêtes multimédia et de 3 feuilles de style. Un pour le téléphone, un pour la tablette et un pour le bureau. J’ai 3 images, l’image d’un téléphone, une tablette et un bureau. Sur un écran de téléphone, seule une image du téléphone s’affiche. Une tablette affiche uniquement l’image de la tablette, un bureau s’affiche sur l’image de l’ordinateur de bureau. Voici un exemple de code pour le faire fonctionner:
Code source:
Le téléphone CSS qui n’a pas besoin d’une requête média. C’est le téléphone img # qui le fait fonctionner:
@media only screen and (max-width: 800px) { .test{ display: none; } }