web-dev-qa-db-ja.com

"display：none"は画像の読み込みを妨げますか？

レスポンシブWebサイトの開発チュートリアルでは、Webブラウザの読み込みが速くなるように、CSSをdisplay:none CSSプロパティを使用してコンテンツをモバイルブラウザに読み込まないようにすることをお勧めします。それは本当ですか？ display:noneは画像をロードしませんか、それともまだモバイルブラウザのコンテンツをロードしますか？モバイルブラウザに不要なコンテンツを読み込まないようにする方法はありますか？

cssresponsive-design
309
nasty

それらの画像が読み込まれます。ブラウザは、スクリプトがDOMの要素を動的にチェックする可能性があるため、要素（または要素の内容）を最適化しません。

あなたはそれをそこでチェックすることができます： http://jsfiddle.net/dk3TA/

画像はdisplay:noneスタイルですが、そのサイズはスクリプトによって読み取られます。ブラウザの開発者ツールの「ネットワーク」タブを見て確認することもできます。

ブラウザが小さなCPUコンピュータ上にある場合、イメージをレンダリングする（そしてページをレイアウトする）必要がない場合は、全体のレンダリング操作が速くなりますが、今日これが本当に意味のあることではないでしょうか。

画像が読み込まれないようにしたい場合は、IMG要素をドキュメントに追加しない（またはIMGのsrc属性を"data:"または"about:blank"に設定する）ことはできません。

編集：

ブラウザは賢くなっています。今日のブラウザ（バージョンによって異なります）は、役に立ちませんと判断できる場合は画像の読み込みをスキップすることがあります。

175
Denys Séguret

CSSで画像をdivの背景画像にする場合、そのdivが "display：none"に設定されていると、画像は読み込まれません。 CSSが無効になっても、CSSは無効になっているため、ロードされません。

121
Brent

答えは単純なはいまたはいいえほど簡単ではありません。最近行ったテストの結果を確認してください。

  • Chromeでは：全8スクリーンショット - *画像がロードされている（img 1）
  • Firefoxの場合：現在表示されているのは1つのscreenshot- *画像だけです（img 2）

そのため、さらに掘り下げた後、私は これ を見つけました。これは、各ブラウザがCSS表示に基づいてimgアセットの読み込みをどのように処理するかを説明します。

ブログ記事からの抜粋：

  • ChromeとSafari（WebKit）：
    WebKitは、背景が一致しないメディアクエリを通じて適用される場合を除き、毎回ファイルをダウンロードします。
  • Firefox：
    スタイルが非表示の場合、Firefoxはbackground imageで呼び出された画像をダウンロードしませんが、それでもimgタグからアセットをダウンロードします。
  • オペラ：
    Firefoxのように、Operaは無用な背景画像をロードしません。
  • インターネットエクスプローラ：
    WebKitのようなIEは、背景画像が表示されていても背景画像をダウンロードします。 IE6では何か変なことが起こります：背景画像と表示の要素：インラインで設定されたものはダウンロードされません...しかし、それらのスタイルがインラインで適用されていない場合はそうなるでしょう。

Chrome- All 8 screenshot-* images loaded

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

54
DMTintner

HTML5 <picture>タグは、画面の幅に応じて適切な画像ソースを解決するのに役立ちます

ブラウザーの動作は過去5年間あまり変化していないようで、多くの場合、display: noneプロパティが設定されていても、非表示の画像をダウンロードします。

メディアクエリ の回避策がありますが、画像がCSSの背景として設定されている場合にのみ有用です。

私は問題に対するJSソリューション（ 遅延負荷 、 picturefill など）だけがあると考えていましたが、そこから出てくるニースの純粋なHTMLソリューションがあるように見えましたHTML5のあるボックス。

そして、それは<picture>タグです。

MDN の説明は次のとおりです。

HTML <picture> elementは、それに含まれる特定の<source>に対して複数の<img>要素を指定するために使用されるコンテナです。ブラウザは、ページの現在のレイアウト（画像が表示されるボックスの制約）および表示されるデバイス（通常またはhiDPIデバイスなど）に応じて、最適なソースを選択します。

そして、それを使用する方法は次のとおりです。

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

背後にあるロジック

ブラウザは、メディアルールが適用されない場合にのみ、imgタグのソースをロードします。 <picture>要素がブラウザでサポートされていない場合、imgタグの表示に再びフォールバックします。

通常、最小の画像を<img>のソースとして配置するため、大きな画面の重い画像は読み込まれません。逆に、メディアルールが適用される場合、<img>のソースはダウンロードされず、代わりに対応する<source>タグのURLのコンテンツがダウンロードされます。

ここでの唯一の落とし穴は、要素がブラウザでサポートされていない場合、小さな画像のみを読み込むことです。一方、2017年には、モバイルファーストアプローチで考え、コーディングする必要があります。

そして、誰かがあまりにも終了する前に、currentブラウザの<picture>のサポートがあります：

デスクトップブラウザ

Desktop browsers support

モバイルブラウザ

Mobile browsers support

使用できます にあるブラウザサポートの詳細をご覧ください。

良いことは、 html5please の文がフォールバックで使用するであることです。そして、私は個人的に彼らの助言を受けるつもりです。

W3Cの仕様 で見つけることができるタグの詳細。そこには免責事項がありますが、それについて言及することが重要です。

picture要素は、外観が似ているvideoおよびaudio要素とは多少異なります。すべてにsource要素が含まれていますが、要素がsrc要素内にネストされている場合、ソース要素のpicture属性は意味がなく、リソース選択アルゴリズムは異なります。同様に、picture要素自体には何も表示されません。含まれる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ピクセル画像のみをダウンロードします（複数回使用するとキャッシュできます）。ただし、<picture>タグがブラウザでサポートされていない場合、デスクトップ画面でも実際の画像wo n'tが表示されることに注意してください（したがって、ポリフィルバックアップが必要になります）そこ）。

27
Evgenia Manolova

はい、それはイメージをレンダリングする必要がなく、画面上でソートする要素が1つ少ないためだけに、少し速くレンダリングされます。

ロードしたくない場合は、後で<img>タグを含むhtmlをロードできるDIVを空のままにします。

前に述べたようにfirebugまたはwiresharkを使ってみると、display:noneがあってもファイルが転送されることがわかります。

Operaは、表示がnoneに設定されていると画像を読み込まない唯一のブラウザです。 Operaは現在WebKitに移行しており、表示がnoneに設定されていてもすべての画像をレンダリングします。

これを証明するテストページがあります。

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

9
Dorian

Divが設定されている場合、div要素のbackground-imageはをロードします。

とにかく、同じdivに親があり、その親が 'display：none'に設定されていると、子要素のbackground-imageはロードされません 。 :)

ブートストラップの使用例

<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

モードの変更：画像と表示：なし

Imageがdisplay: noneを持つか、display:noneを持つ要素の中にある場合、ブラウザはdisplayが別の値に設定されるまで画像をダウンロードしないことを選ぶかもしれません。

displayをblockに切り替えると、Operaのみが画像をダウンロードします。他のすべてのブラウザはすぐにそれをダウンロードします。

8
onlyurei

もしそうなら、不要なコンテンツをモバイルブラウザにロードしない方法はありますか？

<img src="" srcset="">を使う

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

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

6
commonpike

CSSで画像をdivの背景画像にした場合、そのdivが 'display：none'に設定されていると、画像はロードされません

Brentのソリューションを拡張するだけです。

純粋なCSSソリューションでは次のことができます。それはまた、レスポンシブデザイン設定でimgボックスが実際にはimgボックスのように振る舞うようにするものです。画像のサイズ変更.

<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はブラウザがあなたの<img>ブロックに適切な高さ：幅の比率を設定することを可能にするために使用されます（したがって背景画像も）。

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

また、初期ロード時にはデフォルトのメディアビューポートサイズのイメージのみがロードされます。その後、ビューポートによっては、イメージが動的にロードされます。

そしてジャバスクリプトなし！

4
ats

**2019回答**

通常の状況では、display:noneは画像のダウンロードを妨げません

/*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-異なるクラスをロードする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

3
Juanma Menendez

リソースの取得を防ぐには、Webコンポーネントの <template>要素 を使用します。

3
ma11hew28

いいえ。画像は通常どおりにロードされ、携帯電話のユーザー帯域幅の節約を検討している場合はユーザーの帯域幅が使用されます。メディアクエリを使用して画像をロードするデバイスをフィルタリングすることができます。 imageは、画面サイズやメディアクエリが設定されているかどうかにかかわらずimageをロードするので、imageはdivなどの背景画像として設定される必要があります。タグではありません。

2
IsuNas Labs

@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を使ってdisplay/visibility/opacityで表示/非表示を切り替えることができますが、それでも画像はロードされていました。

1
Joakim Ling

もう1つの可能性は、<noscript>タグを使用して、イメージを<noscript>タグの内側に配置することです。次に、javascriptを使用して、画像が必要になったときにnoscriptタグを削除します。このようにして、プログレッシブエンハンスメントを使用してオンデマンドで画像を読み込むことができます。

私が書いたこのpolyfillを使ってIE8の<noscript>タグの内容を読んでください。

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

1
James Westgate

こんにちはみんな私は同じ問題、携帯電話で画像をロードしない方法で苦労していました。

しかし、私は良い解決策を考え出しました。まずimgタグを作成してから、src属性に空白のsvgをロードします。これで、コンテンツへのインラインスタイルとして画像へのURLを設定できます。url（ 'link to your image'）;。今すぐあなたの選択のラッパーであなたの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;
      }
    }

イメージをロードしたくないブレークポイントには、何も表示されないようにラッパーを設定します。表示なしのラッパーにラップされた要素のスタイルは無視されるため、imgタグのインラインCSSは無視されるようになりました。したがって、ラッパーが表示ブロックを持つブレークポイントに達するまで、イメージはロードされません。

モバイルブレークポイントにimgをロードしない、本当に簡単な方法があります。

実用的な例として、このcodepenを調べてください。 http://codepen.io/fennefoss/pen/jmXjvo

1
Mikkel Fennefoss

携帯に画像が読み込まれないという話ですね。あなたが@media（min-width：400px）{background-image：thing.jpg}をしたとしたらどうでしょう。

それでは、特定の画面幅を超えたところで画像を探すだけではないでしょうか。

0
Superfly5000