Werden meine Bilder auf Mobile geladen?

Question

Auf meiner Webseite habe ich ein Karussell mit folgenden Code: CSS & HTML code.

Wird mein mobiler Browser immer noch diese Bilder laden und Bandbreite verbrauchen, obwohl ich den Hintergrund auf display:none eingestellt habe, wenn es unter 600px Breite ist?

---

CSS:

.item1 { 
    background-image: url('/wp-content/uploads/2016/11/1.jpg') 
} 
.item2 { 
    background-image: url('/wp-content/uploads/2016/10/6.jpg') 
} 
.item3 { 
    background-image: url('/wp-content/uploads/2016/10/5.jpg') 
} 
.item4 { 
    background-image: url('/wp-content/uploads/2016/10/3.jpg') 
} 
.item5 { 
    background-image: url('/wp-content/uploads/2016/10/2.jpg') 
} 
.item6 { 
    background-image: url('/wp-content/uploads/2016/10/1.jpg') 
} 
@media all and (max-width: 600px) { 
    .item, .item1, .item2, .item3, .item4, .item5, .item6, #myCarousel4, #myCarousel 4 div { 
     display: none 
    } 
} 

HTML:

<div class="carousel slide" id="myCarousel4"> 
 
<div class="carousel-inner"> 
 
<div class="item item1 active"> 
 
\t <div class="container"> 
 
\t \t <div class="carousel-caption"></div> 
 
\t </div> 
 
</div> 
 
<div class="item item2"> 
 
\t <img class="img-responsive"> 
 
\t <div class="container"> 
 
\t \t <div class="carousel-caption"></div> 
 
\t </div> 
 
</div> 
 
<div class="item item3"> 
 
\t <img class="img-responsive"> 
 
\t <div class="container"> 
 
\t \t <div class="carousel-caption"></div> 
 
\t </div> 
 
</div> 
 
<div class="item item4"> 
 
\t <img class="img-responsive"> 
 
\t <div class="container"> 
 
\t \t <div class="carousel-caption"></div> 
 
\t </div> 
 
</div> 
 
<div class="item item5"> 
 
\t <img class="img-responsive"> 
 
\t <div class="container"> 
 
\t \t <div class="carousel-caption"></div> 
 
\t </div> 
 
</div> 
 
<div class="item item6"> 
 
\t <img class="img-responsive"> 
 
\t <div class="container"> 
 
\t \t <div class="carousel-caption"></div> 
 
\t </div> 
 
</div> 
 
</div> 
 
<a class="left carousel-control" data-slide="prev" href="#myCarousel4"> 
 
\t <i class="glyphicon glyphicon-chevron-left"></i> 
 
</a> 
 
<a class="right carousel-control" data-slide="next" href="#myCarousel4"> 
 
\t <i class="glyphicon glyphicon-chevron-right"></i> 
 
</a> 
 
</div>

Demo: https://jsfiddle.net/xetvLk6w/

Answer 1

Ja. Solange sich Ihre Bilder im Verzeichnis "/wp-content/uploads/2016/10/1.jpg" befinden.

Sie veröffentlichen Ihre Website auf einem Server im Ordner "root", dort haben Sie die "index.html" und die Ordnerstruktur: "root/wp-content/uploads/...".

Also wo immer Sie Ihre Website öffnen, wird es nach dem Verzeichnis suchen und Ihre Bilder finden und laden.

BEARBEITEN Wenn Ihre Anzeigebreite unter 600 Pixel liegt, werden die Bilder nicht angezeigt. Für eine intelligentere CSS können Sie einfach

@media (max-width: 600px) { 
    .item { 
     display: none; 
    } 
} 

verwenden Dies wird jedes div mit der Klasse „item“ verstecken, die alle divs in dem Beispiel enthalten sind.

Answer 2

Eine ähnliche Frage wurde beantwortet: Does "display:none" prevent an image from loading?

und es wird gesagt

Browser werden immer intelligenter. Heute kann Ihr Browser (abhängig von der Version) das Laden des Bildes überspringen, wenn es feststellen kann, dass es nicht nützlich ist.

Es hängt wirklich von Ihrem Browser ab.Einige werden die Bilder geladen werden und einige nicht, wie es in dieser Antwort auf die oben genannten Post angegeben ist: https://stackoverflow.com/a/22970996/2700042

das sind die wesentlichen Ergebnisse in der obigen

nach weiteren Graben So verknüpft Antwort diskutiert ich gefunden Dies erklärt, wie jeder Browser das Laden von IMG-Assets basierend auf CSS-Anzeige behandelt: none;

Auszug aus den blog post:

Chrome und Safari (WebKit): WebKit laden die Datei jedes Mal außer wenn ein Hintergrund durch eine nicht passenden Medien-Abfrage angewandt wird.

Firefox: Firefox wird das Bild mit Hintergrundbild nicht herunterladen, wenn die Stile versteckt sind, aber sie werden immer noch herunterladen Assets von Img-Tags.

Opera: Wie Firefox, lädt Opera nutzlose Hintergrundbilder nicht.

Internet Explorer: IE, wie WebKit wird Hintergrundbilder herunterladen, auch wenn sie anzeigen: keine;

Etwas seltsam erscheint mit IE6: Elemente mit einem Hintergrundbild und Anzeige: keine inline wird nicht heruntergeladen werden ... Aber sie werden, wenn diese Stile nicht inline angewendet werden.

Answer 3

Anzeige: keine wird Ihnen nicht helfen.

Zur besseren Lesbarkeit, würde ich setzen Sie den "default" (mobile-first) css auf wie:

.item1 { 
    background-image: none; 
} 

... 

/*note min and em */ 
@media all and (min-width: 40em) { 
    background-image: url('bla.jpg'); 
}