it-swarm.com.de

Verhindert "display: none" das Laden eines Bildes?

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

317
nasty

Diese Bilder werden geladen. Aufgrund der Möglichkeit, dass ein Skript ein Element des DOM dynamisch überprüft, optimiert der Browser keine Elemente (oder Elementinhalte).

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

Das Bild hat ein display:none style, aber seine Größe wird vom Skript gelesen. Sie hätten es auch überprüfen können, 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 Rendern des Bildes (und das Layout der Seite) nicht erforderlich ist, um den gesamten Rendervorgang zu beschleunigen, aber ich bezweifle, dass dies heute wirklich sinnvoll ist.

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

EDIT:

Browser werden schlauer. Heutzutage überspringt Ihr Browser (abhängig von der Version) möglicherweise das Laden des Bildes, wenn er feststellen kann, dass es nicht nützlich ist.

180
Denys Séguret

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

122
Brent

Die Antwort ist nicht so einfach wie ein einfaches Ja oder Nein. Sehen 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: Es wird nur das 1-Screenshot-Bild geladen, das gerade angezeigt wird (Abb. 2).

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

Auszug aus dem Blogbeitrag:

  • Chrome und Safari (WebKit):
    WebKit lädt die Datei jedes Mal herunter, außer wenn ein Hintergrund über eine nicht übereinstimmende Medienabfrage angewendet wird.
  • Feuerfuchs:
    Firefox lädt das mit dem Hintergrundbild aufgerufene Bild nicht herunter, wenn die Stile ausgeblendet sind, lädt jedoch Assets von img-Tags herunter.
  • Oper:
    Wie Firefox lädt auch Opera) keine nutzlosen Hintergrundbilder.
  • Internet Explorer:
    IE lädt wie WebKit Hintergrundbilder herunter, auch wenn diese angezeigt werden: keine; In IE6 tritt etwas Merkwürdiges auf: Elemente mit einem Hintergrundbild und einer Anzeige: Keine Inline-Stile werden nicht heruntergeladen ... Diese Stile werden jedoch nicht inline angewendet.

Chrome- All 8 screenshot-* images loaded

Firefox- Only the 1 screenshot-* image loaded that is currently being displayed

55
DMTintner

Mit dem HTML5-Tag <picture> Können Sie die richtige Bildquelle in Abhängigkeit von der Bildschirmbreite ermitteln

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

Auch wenn es eine Medienabfragen Problemumgehung gibt, kann dies nur sinnvoll 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 ( Lazy Load , Picturefill , etc.), schien es, dass es eine nette reine HTML-Lösung gibt, die herauskommt die box mit HTML5.

Und das ist das <picture> - Tag.

Hier ist, wie MDN es beschreibt:

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

Und so benutzt man es:

<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 würde die Quelle des Tags img nur laden, wenn keine der Medienregeln zutrifft. Wenn das Element <picture> Vom Browser nicht unterstützt wird, wird wieder das Tag img angezeigt.

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

Der einzige Nachteil hierbei ist, dass, wenn das Element vom Browser nicht unterstützt wird, nur das kleine Bild geladen wird. Andererseits sollten wir 2017 im Mobile first Ansatz denken und codieren.

Und bevor sich jemand zu sehr aufregt, hier die current Browserunterstützung für <picture>:

Desktop-Browser

Desktop browsers support

Mobile Browser

Mobile browsers support

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

Das Gute ist, dass html5please 's Satz darin besteht, es mit einem Fallback zu benutzen. 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 für wichtig halte:

Das picture -Element unterscheidet sich etwas von den ähnlich aussehenden video - und audio -Elementen. Obwohl alle Elemente source enthalten, hat das Attribut src des Quellelements keine Bedeutung, wenn das Element in einem picture -Element verschachtelt ist und der Algorithmus zur Ressourcenauswahl unterschiedlich ist. Auch das picture -Element selbst zeigt nichts an; Es stellt lediglich einen Kontext für das enthaltene img -Element bereit, mit dem es aus mehreren URLs auswählen kann.

Das heißt also, dass es Ihnen nur hilft, die Leistung beim Laden eines Bildes zu verbessern, indem es ihm einen gewissen Kontext verleiht.

Und Sie können immer noch etwas 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>

Somit zeigt der Browser nicht anzeigen das tatsächliche Bild an und lädt nur das Pixelbild 1x1 Herunter (das zwischengespeichert werden kann, wenn Sie es mehrmals verwenden). Beachten Sie jedoch, dass, wenn das Tag <picture> Vom Browser nicht unterstützt wird, auch auf Descktop-Bildschirmen das tatsächliche Bild angezeigt wird wird nicht (Sie werden es also definitiv brauchen) eine Polyfill-Sicherung dort).

27

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

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

Versuchen Sie es mit Firebug oder Wireshark, wie ich es bereits erwähnt habe, und Sie werden sehen, dass die Dateien auch dann übertragen werden, wenn display:none Vorhanden ist.

Opera ist der einzige Browser, der das Bild nicht lädt, wenn die Anzeige auf "Keine" eingestellt ist. Opera ist jetzt zu Webkit gewechselt und rendert alle Bilder, auch wenn deren Anzeige auf "Keine" eingestellt ist.

Hier ist eine Testseite, die es beweisen wird:

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

9
Dorian

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

Wie auch immer, wenn dasselbe div ein übergeordnetes Element hat und dieses übergeordnete Element auf 'display: none' gesetzt ist, wird das Hintergrundbild des untergeordneten Elements wird 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>
8
ninja_corp

Macken-Modus: Bilder und Anzeige: keine

Wenn das Bild display: none Hat oder sich in einem Element mit display:none Befindet, kann es sein, dass der Browser das Bild nicht herunterlädt, bis display auf einen anderen Wert gesetzt ist.

Nur Opera lädt das Bild herunter, wenn Sie display auf block umschalten. Alle anderen Browser laden es sofort herunter.

8
onlyurei

Wenn ja, gibt es eine Möglichkeit, den unnötigen Inhalt 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

6
commonpike

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

Nur um die Lösung von Brent zu 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 wie eine IMG-Box (wofür die transparente PNG gedacht ist). Größenänderung 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 mit visible-lg-block verknüpfte Medienabfrage ausgelöst wird und display: none in display: block geändert wird. Mit dem transparenten PNG kann der Browser das richtige Verhältnis von Höhe zu Breite für Ihren <img> -Block (und damit das Hintergrundbild) in einem fließenden Design festlegen (height: auto; width: 100%).

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

So erhalten Sie für 3 verschiedene Ansichtsfenster etwa Folgendes:

<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 erstmaligen Laden werden nur Bilder in der Standardgröße des Medien-Ansichtsfensters geladen. Anschließend werden die Bilder je nach Ansichtsfenster dynamisch geladen.

Und kein Javascript!

4
ats

** 2019 Antwort **

Unter normalen Umständen verhindert display:none Nicht, dass das Bild heruntergeladen wird

/*will be downloaded*/

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

Wenn ein Vorfahrenelement jedoch display:none Hat, werden die Bilder des Nachkommens 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 laden unterschiedliche Bilder

/* 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 hier selbst zusehen: https://codepen.io/juanmamenendez15/pen/dLQPmX

4
Juanma Menendez

Um das Abrufen von Ressourcen zu verhindern, verwenden Sie <template> Element von Web Components .

3
ma11hew28

Nein. Das Bild wird wie gewohnt geladen und verwendet weiterhin die Bandbreite des Benutzers, wenn Sie die Bandbreiteneinsparung durch den Benutzer des Mobiltelefons in Betracht ziehen. Sie können Medienabfragen verwenden und die Geräte filtern, auf die das Bild geladen werden soll Das Bild muss als Hintergrundbild eines Div usw. und NICHT als Tag festgelegt werden, da das Bild durch das Image-Tag geladen wird, unabhängig davon, ob die Bildschirmgröße und die Medienabfrage festgelegt wurden.

2
IsuNas Labs

Verwenden Sie @media query CSS. Im Grunde genommen 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. So verhindern, dass das Bild geladen wird, ist ganz einfach

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 Ein- und Ausblenden mit Anzeige/Sichtbarkeit/Deckkraft verwenden, aber das Bild wurde noch geladen. Dies war der ausfallsicherste Code, den wir uns ausgedacht haben.

1
Joakim Ling

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 Tag noscript zu entfernen, wenn Sie das Bild benötigen. Auf diese Weise können Sie Bilder bei Bedarf mithilfe der progressiven Verbesserung laden.

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

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

1
James Westgate

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

Aber ich fand eine gute Lösung. Erstellen Sie zuerst ein img-Tag und laden Sie dann eine leere svg in das src-Attribut. Jetzt können Sie Ihre URL zum Bild als Inline-Stil mit folgendem 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 werden. Das Inline-CSS des img-Tags wird jetzt ignoriert, da der Stil eines Elements in einem Wrapper mit Anzeige none ignoriert wird. Daher wird das Bild erst geladen, wenn Sie einen Haltepunkt erreichen, an dem der Wrapper einen Anzeigeblock hat.

Es ist ganz einfach, ein Bild nicht auf einen mobilen Haltepunkt zu laden :)

Schauen Sie sich diesen Codepen an, um ein funktionierendes Beispiel zu finden: http://codepen.io/fennefoss/pen/jmXjvo

1

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

würde es dann nicht erst ab einer bestimmten bildschirmbreite nach dem bild suchen?

0
Superfly5000