366

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

4

18 に答える 18

207

ブラウザはよりスマートになっています。現在、ブラウザ（バージョンによって異なります）は、有用でないと判断できる場合、画像の読み込みをスキップする可能性があります。

画像にはdisplay:noneスタイルがありますが、そのサイズはスクリプトで読み取ることができます。親が非表示になっている場合、Chromev68.0は画像を読み込みません。

あなたはそこでそれをチェックするかもしれません：http：//jsfiddle.net/tnk3j08s/

ブラウザの開発者ツールの[ネットワーク]タブを見て確認することもできます。

ブラウザが小型のCPUコンピュータ上にある場合、画像をレンダリング（およびページをレイアウト）する必要がないため、レンダリング操作全体が高速になりますが、これが今日本当に理にかなっていることではないことに注意してください。

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

于 2012-08-28T11:50:34.927 に答える
137

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

于 2013-03-11T19:01:46.887 に答える
61

答えは、単純な「はい」または「いいえ」ほど簡単ではありません。私が最近行ったテストの結果をチェックしてください：

  • Chromeの場合：8つのスクリーンショットすべて-*画像が読み込まれました（img 1）
  • Firefoxの場合：1つのスクリーンショットのみ-*現在表示されているロードされた画像（img 2）

さらに掘り下げた後、これを見つけました。これは、各ブラウザがcssdisplayに基づいてimgアセットの読み込みを処理する方法を説明しています。

ブログ投稿からの抜粋：

  • ChromeとSafari（WebKit）：
    WebKitは、一致しないメディアクエリを介してバックグラウンドが適用される場合を除いて、毎回ファイルをダウンロードします。
  • Firefox：
    スタイルが非表示になっている場合、Firefoxは背景画像で呼び出された画像をダウンロードしませんが、imgタグからアセットをダウンロードします。
  • Opera：
    Firefoxと同様に、Operaは無駄な背景画像をロードしません。
  • Internet Explorer：
    IEは、WebKitのように、表示されている場合でも背景画像をダウンロードします。IE6では奇妙なことが表示されます：背景画像と表示のある要素：インラインで設定されたものはダウンロードされません...しかし、これらのスタイルがインラインで適用されていない場合はダウンロードされます。

Chrome-8つのスクリーンショットすべて-*画像が読み込まれました

Firefox-1つのスクリーンショットのみ-*現在表示されているロードされた画像

于 2014-04-09T18:28:02.880 に答える
38

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

どうやら、ブラウザの動作は過去5年間あまり変わっておらず、display: noneプロパティが設定されていても、多くの人が非表示の画像をダウンロードしていました。

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

この問題（遅延読み込み、画像の塗りつぶしなど）にはJSの解決策があると思っていましたが、HTML5ですぐに使える純粋なHTMLの解決策があるように見えました。

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

MDNがそれを説明する方法は次のとおりです。

HTML<picture>要素は、それに含まれる特定の<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年には、モバイルファーストのアプローチで考えてコーディングする必要があります。

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

デスクトップブラウザ

デスクトップブラウザはサポートします

モバイルブラウザ

モバイルブラウザはサポートします

ブラウザのサポートについて詳しくは、 CanIuseをご覧ください。

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

タグの詳細については、W3Cの仕様を参照してください。そこに免責事項がありますが、これについて言及することが重要です。

この要素は、見た目が似ている要素とpictureは多少異なります。それらすべてに要素が含まれていますが、要素が要素内にネストされている場合、ソース要素の属性は意味がなく、リソース選択アルゴリズムが異なります。同様に、要素自体は何も表示しません。複数のURLから選択できるようにする、含まれている要素のコンテキストを提供するだけです。videoaudiosourcesrcpicturepictureimg

つまり、画像にコンテキストを提供することで、画像を読み込むときのパフォーマンスを向上させるのに役立つだけだということです。

また、小さなデバイスで画像を非表示にするために、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>タグがブラウザでサポートされていない場合、デスクトップ画面でも実際の画像は表示されないことに注意してください（したがって、ポリフィルバックアップが必ず必要になります）。

于 2017-03-15T00:52:10.280 に答える
13

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

于 2019-04-24T19:43:06.960 に答える
10

はい、画像をレンダリングする必要がなく、画面上で並べ替える要素が1つ少ないという理由だけで、わずかに速くレンダリングされます。

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

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

Operaは、表示がnoneに設定されている場合に画像をロードしない唯一のブラウザです。OperaはWebkitに移行し、表示がnoneに設定されている場合でもすべての画像をレンダリングします。

これを証明するテストページは次のとおりです。

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

于 2012-08-28T11:54:33.793 に答える
8

クァークズモード：画像と表示：なし

画像にが含まdisplay: noneれる、または要素内にある 場合、ブラウザは、 が別の値に設定されるdisplay:noneまで画像をダウンロードしないことを選択できます。display

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

于 2014-10-29T20:16:13.593 に答える
8

divが設定されている場合、 div要素の背景画像が読み込まれます。do'display：none'。

とにかく、同じ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>

于 2018-02-01T17:13:44.950 に答える
6

display: none後者が直接または間接的にプロパティで隠されている場合でも、ブラウザは画像をダウンロードしているようです。

私が見つけたこれを防ぐ唯一の標準的な方法は、タグloadingの属性を使用することでした。img

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

SafariとFirefoxAndroidを除いて、すべての最新のブラウザがこれをサポートしています。

MDNimg要素の仕様。

于 2021-01-24T18:16:32.947 に答える
5

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は、ブラウザが流動的なデザイン（高さ：自動、幅：100％）で<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">

また、最初の読み込み中にデフォルトのメディアビューポートサイズの画像のみが読み込まれ、その後、ビューポートに応じて、画像が動的に読み込まれます。

そして、JavaScriptはありません！

于 2016-01-06T20:46:40.240 に答える
5

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

使用する<img src="" srcset="">

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

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

于 2016-04-13T10:21:47.313 に答える
3

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

于 2015-09-06T19:19:53.040 に答える
2

@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を使用して、表示/可視性/不透明度で表示と非表示を切り替えることができますが、画像はまだ読み込まれていました。これは、私たちが思いついた最もフェイルセーフなコードでした。

于 2016-11-29T11:06:02.583 に答える
2

こんにちはみんな私は同じ問題、モバイルで画像をロードしない方法に苦労していました。

しかし、私は良い解決策を見つけました。最初に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;
      }
    }

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

モバイルブレークポイントにimgをロードしない本当に簡単な方法です:)

実用的な例については、このcodepenをチェックしてください：http：//codepen.io/fennefoss/pen/jmXjvo

于 2017-05-24T09:06:35.827 に答える
2

いいえ。画像は通常どおりに読み込まれますが、携帯電話のユーザー帯域幅の節約を検討している場合は、引き続きユーザーの帯域幅を使用します。メディアクエリを使用して、画像を読み込むデバイスをフィルタリングすることができます。画像は、画面サイズやメディアクエリが設定されているかどうかに関係なく、画像タグが画像を読み込むため、タグではなくdivなどの背景画像として設定する必要があります。

于 2017-11-21T11:40:58.190 に答える
0

モバイルに画像が読み込まれないという話ですよね？@media（min-width：400px）{background-image：thing.jpg}を実行した場合はどうなりますか

それでは、特定の画面幅より上の画像のみを検索しませんか？

于 2015-11-27T10:05:38.907 に答える
0

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

私が書いたこのポリフィルを使用して<noscript>、IE8のタグの内容を読み取ります

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

于 2016-03-11T15:39:34.190 に答える
-3

画像でdisplay：noneを使用する秘訣は、画像にIDを割り当てることです。これは、それを機能させるために必要なコードがそれほど多くないということでした。メディアクエリと3つのスタイルシートを使用した例を次に示します。1つは電話用、1つはタブレット用、もう1つはデスクトップ用です。私は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＃phoneです：

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

頑張って、それがあなたのためにどのように機能するかを私に知らせてください。

于 2017-01-31T03:35:18.377 に答える