In jedem Tutorial zur display:nonereaktionsschnellen Website-Entwicklung wird empfohlen, die CSS-Eigenschaft zu verwenden, um das Laden von Inhalten in mobilen Browsern zu verhindern, damit die Website schneller geladen wird. Ist es wahr? Lädt display:nonedie Bilder nicht oder lädt es immer noch den Inhalt im mobilen Browser? Gibt es eine Möglichkeit, das Laden unnötiger Inhalte in mobilen Browsern zu verhindern?

Browser werden schlauer. Heute überspringt Ihr Browser (abhängig von der Version) möglicherweise das Laden von Bildern, wenn er feststellt, dass dies nicht sinnvoll ist.

Das Bild hat einen display:noneStil, aber seine Größe kann vom Skript gelesen werden. Chrome v68.0 lädt keine Bilder, wenn das übergeordnete Element ausgeblendet ist.

Sie können es dort überprüfen: http://jsfiddle.net/tnk3j08s/

Sie können dies auch überprüfen, indem Sie auf die Registerkarte "Netzwerk" der Entwicklertools Ihres Browsers schauen.

Beachten Sie, dass, wenn sich der Browser auf einem kleinen CPU-Computer befindet, das Nicht-Rendern des Bildes (und Layout der Seite) den gesamten Rendervorgang beschleunigt, aber ich bezweifle, dass dies heute wirklich sinnvoll ist.

Wenn Sie verhindern möchten, dass das Bild geladen wird, können Sie das IMG-Element einfach nicht zu Ihrem Dokument hinzufügen (oder das IMG- srcAttribut auf "data:"oder setzen "about:blank").

Wenn Sie das Bild in CSS zu einem Hintergrundbild eines Div machen und dieses Div auf "display: none" gesetzt ist, wird das Bild nicht geladen. Wenn CSS deaktiviert ist, wird es immer noch nicht geladen, da CSS deaktiviert ist.

Die Antwort ist nicht so einfach wie ein einfaches Ja oder Nein. Schauen Sie sich die Ergebnisse eines Tests an, den ich kürzlich durchgeführt habe:

• In Chrome: Alle 8 Screenshot- * Bilder geladen (Bild 1)
• In Firefox: Nur das 1 Screenshot- * Bild geladen, das gerade angezeigt wird (Abb. 2)

Nachdem ich weiter gegraben hatte, fand ich dies , was erklärt, wie jeder Browser das Laden von img-Assets basierend auf der CSS-Anzeige handhabt: keine;

Auszug aus dem Blogbeitrag:

• Chrome und Safari (WebKit):
  WebKit lädt die Datei jedes Mal herunter, es sei denn, ein Hintergrund wird durch eine nicht übereinstimmende Medienabfrage angewendet.
• Firefox:
  Firefox lädt das mit Hintergrundbild aufgerufene Bild nicht herunter, wenn die Stile ausgeblendet sind, lädt jedoch weiterhin Assets von IMG-Tags herunter.
• Opera:
  Wie Firefox lädt Opera keine nutzlosen Hintergrundbilder.
• Internet Explorer:
  IE lädt wie WebKit Hintergrundbilder herunter, auch wenn diese angezeigt werden: keine; Mit IE6 erscheint etwas Seltsames: Elemente mit Hintergrundbild und Anzeige: Keine inline eingestellten Elemente werden nicht heruntergeladen ... Dies ist jedoch der Fall, wenn diese Stile nicht inline angewendet werden.

Das HTML5- <picture>Tag hilft Ihnen dabei, die richtige Bildquelle abhängig von der Bildschirmbreite aufzulösen

Anscheinend hat sich das Verhalten des Browsers in den letzten 5 Jahren nicht wesentlich geändert, und viele haben die versteckten Bilder immer noch heruntergeladen, selbst wenn eine display: noneEigenschaft für sie festgelegt wurde.

Obwohl es eine Problemumgehung für Medienabfragen gibt , kann dies nur nützlich sein, wenn das Bild im CSS als Hintergrund festgelegt wurde.

Während ich dachte, dass es nur eine JS-Lösung für das Problem gibt ( verzögertes Laden , Ausfüllen von Bildern usw.), schien es eine nette reine HTML-Lösung zu geben, die mit HTML5 sofort einsatzbereit ist.

Und das ist der <picture>Tag.

Hier ist , wie MDN es beschreibt:

Das HTML- <picture>Element ist ein Container, mit dem mehrere <source>Elemente für ein bestimmtes Element angegeben werden <img>. Der Browser wählt die am besten geeignete Quelle entsprechend dem aktuellen Layout der Seite (die Einschränkungen des Felds, in dem das Bild angezeigt wird) und dem Gerät, auf dem es angezeigt wird (z. B. ein normales oder HiDPI-Gerät).

Und so geht's:

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Die Logik dahinter

Der Browser lädt die Quelle des imgTags nur, wenn keine der Medienregeln gilt. Wenn das <picture>Element vom Browser nicht unterstützt wird, wird das imgTag erneut angezeigt .

Normalerweise würden Sie das kleinste Bild als Quelle für das verwenden <img>und daher die schweren Bilder für größere Bildschirme nicht laden. Umgekehrt wird, wenn eine Medienregel gilt, die Quelle des <img>nicht heruntergeladen, sondern der Inhalt der URL des entsprechenden <source>Tags.

Die einzige Gefahr besteht darin, dass das Element nur das kleine Bild lädt, wenn es vom Browser nicht unterstützt wird. Auf der anderen Seite sollten wir 2017 im mobilen ersten Ansatz denken und codieren .

Und bevor jemand zu aufgeregt wurde, finden Sie hier die aktuelle Browserunterstützung für <picture>:

Desktop-Browser

Mobile Browser

Weitere Informationen zur Browserunterstützung finden Sie unter Kann ich verwenden ?

Das Gute ist, dass der Satz von html5please darin besteht, ihn mit einem Fallback zu verwenden . Und ich persönlich beabsichtige, ihren Rat anzunehmen.

Weitere Informationen zum Tag finden Sie in der W3C-Spezifikation . Dort gibt es einen Haftungsausschluss, den ich wichtig zu erwähnen finde:

Das pictureElement unterscheidet sich etwas von dem ähnlich aussehenden videound den audioElementen. Während alle sourceElemente enthalten , hat das srcAttribut des Quellelements keine Bedeutung, wenn das Element in einem pictureElement verschachtelt ist und der Ressourcenauswahlalgorithmus unterschiedlich ist. Auch das pictureElement selbst zeigt nichts an; Es bietet lediglich einen Kontext für das enthaltene imgElement, mit dem es aus mehreren URLs auswählen kann.

Es heißt also, dass Sie die Leistung beim Laden eines Bildes nur verbessern können, indem Sie einen Kontext dafür bereitstellen.

Und Sie können immer noch CSS-Magie verwenden, um das Bild auf kleinen Geräten auszublenden:

<style>
  picture { display: none; }

  @media (min-width: 600px) {
    picture {
      display: block;
    }
  }
</style>

<picture>
 <source srcset="the-real-image-source" media="(min-width: 600px)">
 <img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>

So wird der Browser nicht angezeigt , das aktuelle Bild und wird nur auf das Download - 1x1Pixelbild (die im Cache gespeichert werden kann , wenn Sie es mehr als einmal). <picture>Beachten Sie jedoch, dass das tatsächliche Bild auch auf Descktop-Bildschirmen nicht angezeigt wird, wenn das Tag vom Browser nicht unterstützt wird (daher benötigen Sie dort auf jeden Fall ein Polyfill-Backup).

Ja, es wird etwas schneller gerendert, nur weil es das Bild nicht rendern muss und ein Element weniger zum Sortieren auf dem Bildschirm ist.

Wenn Sie nicht möchten, dass es geladen wird, lassen Sie ein DIV leer, in das Sie später HTML mit einem <img>Tag laden können .

Wenn Sie Firebug oder Wireshark verwenden, wie ich bereits erwähnt habe, werden Sie feststellen, dass die Dateien auch dann übertragen werden, wenn sie display:nonevorhanden sind.

Opera ist der einzige Browser, der das Bild nicht lädt, wenn die Anzeige auf keine eingestellt ist. Opera ist jetzt zum Webkit übergegangen und rendert alle Bilder, auch wenn ihre Anzeige auf keine eingestellt ist.

Hier ist eine Testseite, die dies beweisen wird:

http://www.quirksmode.org/css/displayimg.html

** 2019 Antwort **

In einer normalen Situation display:nonewird das Herunterladen des Bildes nicht verhindert

/*will be downloaded*/

#element1 {
    display: none;
    background-image: url('https://picsum.photos/id/237/100');
}

Wenn jedoch ein Ahnenelement vorhanden ist, werden display:nonedie Bilder des Nachkommen nicht heruntergeladen

/* Markup */

<div id="father">
    <div id="son"></div>
</div>


/* Styles */

#father {
    display: none;
}

/* #son will not be downloaded because the #father div has display:none; */

#son {
    background-image: url('https://picsum.photos/id/234/500');
}

Andere Situationen, die das Herunterladen des Bildes verhindern:

1- Das Zielelement existiert nicht

/* never will be downloaded because the target element doesn't exist */

#element-dont-exist {
    background-image: url('https://picsum.photos/id/240/400');
}

2- Zwei gleiche Klassen, die unterschiedliche Bilder laden

/* The first image of #element2 will never be downloaded because the other #element2 class */

#element2 {
    background-image: url('https://picsum.photos/id/238/200');
}

/* The second image of #element2 will be downloaded */

#element2 {
    background-image: url('https://picsum.photos/id/239/300');
}

Sie können sich hier selbst davon überzeugen: https://codepen.io/juanmamenendez15/pen/dLQPmX

Mackenmodus: Bilder und Anzeige: keine

Wenn sich ein Bild display: nonein einem Element mit befindet oder befindet display:none, kann der Browser das Bild möglicherweise erst herunterladen, wenn das display auf einen anderen Wert eingestellt ist.

Nur Opera lädt das Bild , wenn Sie wechseln die displayzu block. Alle anderen Browser laden es sofort herunter.

Das Hintergrundbild eines div-Elements wird geladen, wenn div auf 'display: none' gesetzt ist.

Wenn dasselbe div ein übergeordnetes Element hat und dieses übergeordnete Element auf 'display: none' eingestellt ist, wird das Hintergrundbild des untergeordneten Elements nicht geladen . :) :)

Beispiel mit Bootstrap:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="col-xs-12 visible-lg">
	<div style="background-image: url('http://via.placeholder.com/300x300'); background-repeat:no-repeat; height: 300px;">lg</div>
</div>
<div class="col-xs-12 visible-md">
	<div style="background-image: url('http://via.placeholder.com/200x200'); background-repeat:no-repeat; height: 200px;">md</div>
</div>
<div class="col-xs-12 visible-sm">
	<div style="background-image: url('http://via.placeholder.com/100x100'); background-repeat:no-repeat; height: 100px">sm</div>
</div>
<div class="col-xs-12 visible-xs">
	<div style="background-image: url('http://via.placeholder.com/50x50'); background-repeat:no-repeat; height: 50px">xs</div>
</div>

Wenn ja, gibt es eine Möglichkeit, unnötige Inhalte nicht in mobile Browser zu laden?

verwenden <img src="" srcset="">

http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/

https://caniuse.com/#feat=srcset

Wenn Sie das Bild in CSS zu einem Hintergrundbild eines Div machen und dieses Div auf 'display: none' gesetzt ist, wird das Bild nicht geladen.

Ich möchte nur die Lösung von Brent erweitern.

Für eine reine CSS-Lösung können Sie Folgendes tun: Außerdem verhält sich die IMG-Box in einer reaktionsschnellen Designeinstellung tatsächlich wie eine IMG-Box (dafür ist das transparente PNG vorgesehen). Dies ist besonders nützlich, wenn Ihr Design reaktionsschnell dynamisch verwendet. Ändern der Größe von Bildern.

<img style="display: none; height: auto; width:100%; background-image: 
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block 
visible-lg-block" src="img/400x186_trans.png" alt="pic 1 mofo">

Das Bild wird nur geladen, wenn die an den sichtbaren lg-Block gebundene Medienabfrage ausgelöst wird und display: none in display: block geändert wird. Das transparente PNG wird verwendet, um es dem Browser zu ermöglichen, geeignete Verhältnisse von Höhe zu Breite für Ihren <img> -Block (und damit das Hintergrundbild) in einem fließenden Design (Höhe: Auto; Breite: 100%) festzulegen.

1078/501 = ~2.15  (large screen)
400/186  = ~2.15  (small screen)

Am Ende haben Sie also Folgendes: 3 verschiedene Ansichtsfenster:

<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">

Beim ersten Laden werden nur Bilder in der Standardgröße Ihres Medienansichtsfensters geladen. Anschließend werden Bilder abhängig von Ihrem Ansichtsfenster dynamisch geladen.

Und kein Javascript!

Verwenden Sie das <template>Element Webkomponenten, um das Abrufen von Ressourcen zu verhindern .

Hallo Leute, ich hatte mit dem gleichen Problem zu kämpfen, wie man ein Bild nicht auf ein Handy lädt.

Aber ich habe eine gute Lösung gefunden. Erstellen Sie zuerst ein img-Tag und laden Sie dann ein leeres svg in das src-Attribut. Jetzt können Sie Ihre URL zum Bild als Inline-Stil mit Inhalt festlegen: URL ('Link zu Ihrem Bild');. Wickeln Sie nun Ihr img-Tag in einen Wrapper Ihrer Wahl.

<div class="test">
  <img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/‌​svg%22/%3E" style="content:url('https://blog.prepscholar.com/hubfs/body_testinprogress.gif?t=1495225010554')">
</div>

  @media only screen and (max-width: 800px) {
      .test{
       display: none;
      }
    }

Stellen Sie den Wrapper so ein, dass an dem Haltepunkt, an dem Sie das Bild nicht laden möchten, keine angezeigt wird. Das Inline-CSS des img-Tags wird jetzt ignoriert, da der Stil eines Elements, das in einen Wrapper mit Anzeige keine eingeschlossen ist, ignoriert wird. Daher wird das Bild erst geladen, wenn Sie einen Haltepunkt erreichen, an dem der Wrapper einen Anzeigeblock hat.

Los geht's, ganz einfach, um kein IMG auf den mobilen Haltepunkt zu laden :)

In diesem Codepen finden Sie ein funktionierendes Beispiel: http://codepen.io/fennefoss/pen/jmXjvo

Nein. Das Bild wird wie gewohnt geladen und verwendet weiterhin die Bandbreite des Benutzers, wenn Sie die Bandbreite des Mobiltelefonbenutzers einsparen möchten. Sie können die Medienabfrage verwenden und die Geräte filtern, auf die Ihr Bild geladen werden soll Das Bild muss als Hintergrundbild eines Div usw. und NICHT als Tag festgelegt werden, da das Image-Tag das Bild unabhängig von der Bildschirmgröße und der festgelegten Medienabfrage lädt.

Eine andere Möglichkeit besteht darin, ein <noscript>Tag zu verwenden und das Bild innerhalb des <noscript>Tags zu platzieren. Verwenden Sie dann Javascript, um das zu entfernennoscript Tag wenn Sie das Bild benötigen. Auf diese Weise können Sie Bilder bei Bedarf mithilfe der progressiven Verbesserung laden.

Verwenden Sie diese Polyfüllung, die ich geschrieben habe, um den Inhalt von zu lesen <noscript> Tags in IE8

https://github.com/jameswestgate/noscript-textcontent

Verwenden Sie @ media-Abfrage-CSS. Im Grunde veröffentlichen wir nur ein Projekt, bei dem wir ein riesiges Bild eines Baums auf dem Desktop an der Seite hatten, das jedoch nicht in Tabellen- / Mobilbildschirmen angezeigt wurde. Verhindern Sie also, dass das Bild ganz einfach geladen wird

Hier ist ein kleiner Ausschnitt:

.tree {
    background: none top left no-repeat; 
}

@media only screen and (min-width: 1200px) {
    .tree {
        background: url(enormous-tree.png) top left no-repeat;
    }
}

Sie können dasselbe CSS zum Anzeigen und Ausblenden mit Anzeige / Sichtbarkeit / Deckkraft verwenden, aber das Bild wurde noch geladen. Dies war der ausfallsicherste Code, den wir entwickelt haben.

Wir sprechen über Bilder, die nicht auf Mobilgeräten geladen werden, oder? Was ist, wenn Sie gerade ein @media (min-width: 400px) {background-image: thing.jpg} erstellt haben?

würde es dann nicht nur über einer bestimmten Bildschirmbreite nach dem Bild suchen?

Der Trick bei der Verwendung der Anzeige: Keine mit Bildern besteht darin, ihnen eine ID zuzuweisen. Dies war, dass nicht viel Code benötigt wird, damit es funktioniert. Hier ist ein Beispiel mit Medienabfragen und 3 Stylesheets. Eine für das Telefon, eine für das Tablet und eine für den Desktop. Ich habe 3 Bilder, ein Bild eines Telefons, eines Tablets und eines Desktops. Auf einem Telefonbildschirm wird nur ein Bild des Telefons angezeigt, ein Tablet zeigt nur das Tablet-Bild an, ein Desktop wird auf dem Desktop-Computerbild angezeigt. Hier ist ein Codebeispiel, damit es funktioniert:

Quellcode:

<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>

Das Telefon-CSS, für das keine Medienabfrage erforderlich ist. Es ist das img # Telefon, mit dem es funktioniert:

img#phone {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }

img#tablet {display: none;}
img#desktop {display: none;}

Das Tablet CSS:

@media only screen and (min-width: 641px) {
img#phone {display: none;}

img#tablet {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }
}

Und das Desktop-CSS:

@media only screen and (min-width: 1141px) {
img#tablet {display: none;}

img#desktop {
    display: block;
    margin: 6em auto 0 auto;
    width: 80%;
    }
}

Viel Glück und lassen Sie mich wissen, wie es bei Ihnen funktioniert.