每一個響應式網站開發教程都推薦使用display:none CSS屬性來隱藏內容，避免在移動瀏覽器上加載，從而加快網站的加載速度。是真的嗎？是否顯示:none不加載圖像還是仍然加載移動瀏覽器上的內容？有什么方法可以防止手機瀏覽器加載不必要的內容？

瀏覽器變得越來越智能。今天你的瀏覽器(取決于版本)可能會跳過圖像加載，如果它可以確定它是無用的。

圖像有一個display:none樣式，但是它的大小可以被腳本讀取。 如果父代是隱藏的，Chrome v68.0不會加載圖像。

你可以在那里查到:http://jsfiddle.net/tnk3j08s/

你也可以通過查看瀏覽器開發工具的“網絡”標簽來檢查它。

請注意，如果瀏覽器在小型CPU計算機上，不必渲染圖像(和布局頁面)將使整個渲染操作更快，但我懷疑這在今天是否真正有意義。

如果您想阻止圖像加載，您可以簡單地不添加IMG元素到您的文檔中(或將IMG src屬性設置為“數據:”或“關于:空白”)。

如果您將圖像作為CSS中div的背景圖像，當該div設置為“display: none”時，圖像將不會加載。當CSS被禁用時，它仍然不會加載，因為CSS被禁用了。

答案不是簡單的是或否那么簡單。看看我最近做的一個測試的結果:

在Chrome中:所有8張截圖-*圖片已加載(img 1) 在Firefox中:只有一張截圖*當前顯示的圖片(img 2) 所以在進一步挖掘后我發現了這個，它解釋了每個瀏覽器如何處理基于css顯示加載img資產:none

摘自博文:

Chrome和Safari (WebKit): WebKit每次都下載文件，除非通過不匹配的 媒體-查詢。 Firefox:如果樣式被隱藏，Firefox不會下載名為背景圖片的圖片，但是他們仍然會下載資源 來自img標簽。 Opera:和Firefox一樣，Opera不會加載無用的背景圖片。 IE和WebKit一樣會下載背景圖片，即使它們有顯示:無； IE6出現了一些奇怪的東西:帶有背景圖像和顯示的元素:沒有內嵌設置不會被下載...但是他們會的 如果這些樣式沒有內聯應用。

顯然，瀏覽器的行為在過去的5年里沒有太大的變化，許多人仍然會下載隱藏的圖片，即使有顯示:沒有屬性設置。

盡管有一個媒體查詢的變通辦法，但它只有在圖像被設置為CSS中的背景時才有用。

當我在想這個問題只有一個JS解決方案的時候(lazy load，picturefill，等等)。)，HTML5似乎提供了一個不錯的純HTML解決方案。

這就是& lt圖片& gt標簽。

MDN是這樣描述的:

HTML & lt圖片& gt元素是一個容器，用于指定多個& ltsource & gt特定& ltimg & gt包含在里面。瀏覽器將根據頁面的當前布局(圖像將出現的框的約束)和顯示圖像的設備(例如普通或hiDPI設備)選擇最合適的源。)

下面是如何使用它:

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

背后的邏輯 只有當沒有媒體規則適用時，瀏覽器才會加載img標簽的源。當& lt圖片& gt元素不受瀏覽器支持，它將再次退回到顯示img標記。

通常你會把最小的圖像作為& ltimg & gt從而不會為更大的屏幕加載沉重的圖像。反之亦然，如果介質規則適用，則& ltimg & gt不會被下載，相反它會下載相應的url的內容& ltsource & gt標簽。

這里唯一的缺陷是，如果瀏覽器不支持該元素，它將只加載小圖像。 另一方面，在2017年，我們應該以移動優先的方式進行思考和編碼。

在有人興奮過度之前，這里是當前瀏覽器對& lt圖片& gt：

桌面瀏覽器

移動瀏覽器

有關瀏覽器支持的更多信息，請訪問我可以使用嗎？

好的一點是html5please的這句話是用了有退路的。我個人打算接受他們的建議。

你可以在W3C的規范中找到更多關于標簽的信息。這里有一個免責聲明，我覺得值得一提:

圖片元素與外觀相似的視頻和音頻元素有些不同。雖然它們都包含源元素，但是當元素嵌套在圖片元素中時，源元素的src屬性沒有意義，并且資源選擇算法是不同的。同樣，圖片元素本身不顯示任何內容；它只是為它所包含的img元素提供了一個上下文，使它能夠從多個URL中進行選擇。

所以它說的是，它只是通過提供一些上下文來幫助你提高加載圖像的性能。

您仍然可以使用一些CSS魔法來隱藏小型設備上的圖像:

<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>

因此，瀏覽器不會顯示實際的圖像，只會下載1x1像素的圖像(如果使用多次，可以緩存)。但是，請注意，如果& lt圖片& gt瀏覽器不支持標簽，即使在descktop屏幕上也不會顯示實際的圖像(因此您肯定需要一個多填充備份)。

即使圖像被display: none屬性直接或間接隱藏，瀏覽器仍會下載圖像。防止這種情況發生的唯一標準方法是使用loading = & quot懶惰& quot：

<img src="https://cdn.example/image.jpg" loading="lazy">

所有最新的桌面和移動網絡瀏覽器都支持它。

** 2019答案**

在正常情況下，顯示“無”不會阻止下載圖像

/*will be downloaded*/

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

但是如果一個祖先元素有display:none，那么后代的圖像將不會被下載

/* 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');
}

阻止下載圖像的其他情況:

1-目標元素不存在

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

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

2-加載不同圖像的兩個相等的類

/* 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');
}

你可以在這里自己看:https://codepen.io/juanmamenendez15/pen/dLQPmX

是的，它會渲染得更快一點，只是因為它不需要渲染圖像，并且在屏幕上少了一個需要排序的元素。

如果您不想加載它，請將一個DIV留空，您可以稍后將html加載到其中，其中包含一個& ltimg & gt標簽。

嘗試使用firebug或wireshark，就像我之前提到的那樣，你會發現即使display:none不存在，文件也會被傳輸。

Opera是唯一一個當display設置為none時不會加載圖像的瀏覽器。Opera現在已經轉移到webkit，將渲染所有圖像，即使它們的顯示設置為無。

這里有一個測試頁面可以證明這一點:

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

怪癖模式:圖像和顯示:無

當圖像顯示時:無或在具有的元素內 顯示:無，瀏覽器可能選擇不下載圖像，直到顯示 被設置為另一個值。

當您將顯示器切換到block時，只有Opera會下載圖像。 所有其他瀏覽器會立即下載它。

如果div設置為“顯示:無”，將加載div元素的背景圖像。

無論如何，如果同一個div有一個父元素，并且該父元素被設置為“display:none”，那么子元素的背景圖像將不會被加載。:)

使用引導程序的示例:

<link  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>

如果在CSS中將圖像作為div的背景圖像，當該div設置為“display: none”時，圖像將不會加載。

只是擴展了布倫特的解決方案。

對于一個純CSS解決方案，您可以做以下事情，它也使img框實際上像響應設計設置中的img框一樣(這就是透明png的用途)，如果您的設計使用響應動態調整大小的圖像，這尤其有用。

<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">

只有當與visible-lg-block相關的媒體查詢被觸發且display:none更改為display:block時，才會加載圖像。透明的png用于允許瀏覽器為您的& ltimg & gt流體設計中的塊(以及背景圖像)(高度:自動；寬度:100%)。

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

因此，對于3個不同的視口，您最終會得到如下結果:

<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">

并且在初始加載期間僅加載默認媒體視口大小的圖像，之后，根據您的視口，圖像將動態加載。

而且沒有javascript！

如果是這樣，有沒有辦法不在手機上加載不必要的內容 瀏覽器？

使用& ltimg src = " " srcset = " " & gt

http://www . web designer depot . com/2015/08/the-state-of-responsive-images/

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

要防止獲取資源，請使用& lt模板& gtWeb組件的元素。

使用@media query CSS，基本上我們只是發布了一個項目，其中我們在桌面上有一棵樹的巨大圖像，但沒有顯示在桌面/手機屏幕上。因此，防止圖像加載很容易

下面是一小段:

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

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

你可以使用相同的CSS來顯示和隱藏顯示/可見性/不透明度，但圖像仍在加載，這是我們想出的最安全的代碼。

嗨，伙計們，我也在糾結同樣的問題，如何在手機上不加載圖片。

但是我想出了一個好辦法。首先創建一個img標簽，然后在src屬性中加載一個空白的svg。現在，您可以將圖像的url設置為帶有內容的內嵌樣式:URL(“鏈接到您的圖像”)；。現在，用您選擇的包裝器包裝您的img標簽。

<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;
      }
    }

將包裝器設置為在不希望加載圖像的斷點處顯示none。img標簽的內聯css現在被忽略，因為用display none包裝的元素的樣式將被忽略，因此圖像不會被加載，直到到達包裝具有display塊的斷點。

這就是不在移動斷點處加載img的簡單方法:)

看看這個代碼筆，它是一個工作示例:http://codepen.io/fennefoss/pen/jmXjvo

號碼如果你考慮到移動電話用戶帶寬的節省，圖像將照常加載，并且仍然使用用戶的帶寬。你可以做的是使用媒體查詢和過濾設備，你想你的形象加載。您的圖像必須設置為div等的背景圖像，而不是標簽，因為無論屏幕大小和媒體查詢設置如何，圖像標簽都會加載圖像。

我們說的是不能在手機上加載的圖片，對嗎？那么如果你只是做了一個@ media(min-width:400 px){ background-image:thing . jpg }

難道它不會只尋找某個屏幕寬度以上的圖像嗎？

另一種可能性是使用& ltnoscript & gt標記并將圖像放在& ltnoscript & gt標簽。然后使用javascript刪除noscript標記，因為您需要該圖像。通過這種方式，您可以使用漸進式增強按需加載圖像。

用我寫的這個聚合文件來閱讀& ltnoscript & gtIE8中的標簽

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

對圖像使用display:none的技巧是給它們分配一個id。這是因為不需要太多代碼就能讓它工作。這是一個使用媒體查詢和3個樣式表的例子。一個用于手機，一個用于平板電腦，一個用于臺式機。我有3張圖片，一張手機圖片，一張平板電腦圖片和一張臺式機圖片。在手機屏幕上只會顯示手機的圖像，平板電腦只會顯示平板電腦的圖像，桌面電腦會顯示桌面電腦的圖像。 下面是一個代碼示例:

源代碼:

<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>

不需要媒體查詢的電話CSS。img #手機讓它發揮作用:

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

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

平板電腦css:

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

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

和桌面css:

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

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

祝你好運，讓我知道它是如何為你工作的。