Setiap tutorial pengembangan situs web yang responsif merekomendasikan penggunaan display:noneproperti CSS untuk menyembunyikan konten agar tidak dimuat di browser seluler sehingga situs web memuat lebih cepat. Apakah itu benar Tidak display:nonememuat gambar atau masih memuat konten di peramban seluler? Apakah ada cara untuk mencegah pemuatan konten yang tidak perlu di browser seluler?

Browser semakin pintar. Hari ini browser Anda (tergantung pada versinya) mungkin melewatkan pemuatan gambar jika itu dapat menentukan itu tidak berguna.

Gambar memiliki display:nonegaya tetapi ukurannya dapat dibaca oleh skrip. Chrome v68.0 tidak memuat gambar jika induknya disembunyikan.

Anda dapat memeriksanya di sana: http://jsfiddle.net/tnk3j08s/

Anda juga bisa memeriksanya dengan melihat tab "jaringan" dari alat pengembang browser Anda.

Perhatikan bahwa jika browser menggunakan komputer CPU kecil, tidak harus membuat gambar (dan tata letak halaman) akan membuat seluruh operasi rendering lebih cepat tapi saya ragu ini adalah sesuatu yang benar-benar masuk akal hari ini.

Jika Anda ingin mencegah gambar dimuat, Anda mungkin tidak menambahkan elemen IMG ke dokumen Anda (atau mengatur srcatribut IMG ke "data:"atau "about:blank").

Jika Anda menjadikan gambar sebagai latar-gambar dari div di CSS, ketika div itu diatur ke "display: none", gambar tidak akan memuat. Ketika CSS dinonaktifkan, itu masih tidak akan memuat, karena, well, CSS dinonaktifkan.

Jawabannya tidak semudah ya atau tidak. Lihat hasil tes yang baru-baru ini saya lakukan:

• Di Chrome: Semua 8 tangkapan layar- * gambar dimuat (gambar 1)
• Di Firefox: Hanya gambar layar 1- * yang dimuat yang sedang ditampilkan (gambar 2)

Jadi setelah menggali lebih jauh saya menemukan ini , yang menjelaskan bagaimana setiap browser menangani pemuatan aset img berdasarkan tampilan css: tidak ada;

Kutipan dari posting blog:

• Chrome dan Safari (WebKit):
  WebKit mengunduh file setiap kali kecuali ketika latar belakang diterapkan melalui kueri media yang tidak cocok.
• Firefox:
  Firefox tidak akan mengunduh gambar yang disebut dengan gambar latar belakang jika gaya disembunyikan tetapi mereka masih akan mengunduh aset dari tag img.
• Opera:
  Seperti halnya Firefox, Opera tidak akan memuat gambar latar belakang yang tidak berguna.
• Internet Explorer:
  IE, seperti WebKit akan mengunduh gambar latar belakang meskipun mereka memiliki tampilan: tidak ada; Sesuatu yang aneh muncul dengan IE6: Elemen dengan gambar latar belakang dan tampilan: tidak ada set inline tidak akan diunduh ... Tapi itu akan terjadi jika gaya tersebut tidak diterapkan inline.

HTML5 <picture>Tag akan membantu Anda untuk menyelesaikan sumber gambar yang tepat tergantung pada lebar layar

Tampaknya perilaku browser tidak banyak berubah selama 5 tahun terakhir dan banyak yang masih akan mengunduh gambar tersembunyi, bahkan jika ada display: noneproperti yang ditetapkan pada mereka.

Meskipun ada solusi media query , itu hanya bisa berguna ketika gambar ditetapkan sebagai latar belakang di CSS.

Sementara saya berpikir bahwa hanya ada solusi JS untuk masalah ini ( lazy load , picturefill , dll.), Ternyata ada solusi HTML murni yang bagus yang keluar dari kotak dengan HTML5.

Dan itu adalah <picture>tag.

Begini cara MDN menjelaskannya:

The HTML <picture>elemen adalah wadah yang digunakan untuk menentukan beberapa <source>elemen untuk spesifik<img> yang terkandung di dalamnya. Browser akan memilih sumber yang paling sesuai dengan tata letak halaman saat ini (batasan kotak gambar akan muncul) dan perangkat itu akan ditampilkan (misalnya perangkat normal atau hiDPI.)

Dan inilah cara menggunakannya:

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

Logika di belakang

Browser akan memuat sumber imgtag, hanya jika tidak ada aturan media yang berlaku. Ketika <picture>elemen tidak didukung oleh browser, itu lagi akan mundur untuk menunjukkanimg tag.

Biasanya Anda akan menempatkan gambar terkecil sebagai sumber <img>dan karenanya tidak memuat gambar berat untuk layar yang lebih besar. Begitu juga sebaliknya, jika aturan media berlaku, sumbernya <img>tidak akan diunduh, melainkan akan mengunduh konten url yang sesuai.<source> tag yang .

Satu-satunya kekurangan di sini adalah bahwa jika elemen tidak didukung oleh browser, itu hanya akan memuat gambar kecil. Di sisi lain pada 2017 kita harus berpikir dan kode di ponsel terlebih dahulu pendekatan .

Dan sebelum seseorang terlalu keluar, inilah dukungan browser saat ini untuk <picture>:

Browser desktop

Browser seluler

Lebih lanjut tentang dukungan browser yang dapat Anda temukan di Dapatkah saya menggunakan .

Yang menyenangkan adalah kalimat html5please adalah menggunakannya dengan fallback . Dan saya pribadi berniat untuk mengambil saran mereka.

Lebih lanjut tentang tag Anda dapat menemukan dalam spesifikasi W3C . Ada penafian di sana, yang menurut saya penting untuk disebutkan:

The pictureelemen agak berbeda dari yang tampak serupa videodan audioelemen. Sementara semuanya mengandung sourceelemen, srcatribut elemen sumber tidak memiliki arti ketika elemen bersarang di dalam pictureelemen, dan algoritma pemilihan sumber daya berbeda. Selain itu, pictureelemen itu sendiri tidak menampilkan apa pun; itu hanya menyediakan konteks untuk imgelemen yang terkandung yang memungkinkannya memilih dari beberapa URL.

Jadi yang dikatakannya adalah itu hanya membantu Anda meningkatkan kinerja saat memuat gambar, dengan memberikan konteks tertentu.

Dan Anda masih dapat menggunakan beberapa sihir CSS untuk menyembunyikan gambar di perangkat kecil:

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

Dengan demikian browser tidak akan menampilkan gambar aktual dan hanya akan mengunduh 1x1gambar piksel (yang dapat di-cache jika Anda menggunakannya lebih dari sekali). Perlu diketahui, bahwa jika <picture>tag tidak didukung oleh browser, bahkan pada layar descktop gambar yang sebenarnya tidak akan ditampilkan (jadi Anda pasti akan memerlukan cadangan polyfill di sana).

Ya itu akan membuat lebih cepat, sedikit, hanya karena itu tidak harus membuat gambar dan elemen yang kurang untuk diurutkan di layar.

Jika Anda tidak ingin itu dimuat, biarkan DIV kosong di mana Anda dapat memuat html ke dalamnya nanti yang berisi <img> tag.

Coba gunakan pembakar atau wireshark seperti yang saya sebutkan sebelumnya dan Anda akan melihat bahwa file DO ditransfer bahkan jika display:none ada.

Opera adalah satu-satunya browser yang tidak akan memuat gambar jika tampilan tidak diatur.Opera sekarang telah pindah ke webkit dan akan membuat semua gambar bahkan jika tampilan mereka tidak diatur.

Berikut ini adalah halaman pengujian yang akan membuktikannya:

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

** 2019 Jawab **

Dalam situasi normal display:nonetidak menghalangi gambar untuk diunduh

/*will be downloaded*/

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

Tetapi jika elemen leluhur memiliki gambar display:nonemaka keturunan tidak akan diunduh

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

Situasi lain yang mencegah gambar diunduh:

1- Elemen target tidak ada

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

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

2- Dua kelas yang sama memuat gambar yang berbeda

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

Anda dapat menyaksikan sendiri di sini: https://codepen.io/juanmamenendez15/pen/dLQPmX

Mode quirks: gambar dan tampilan: tidak ada

Ketika gambar memiliki display: noneatau berada di dalam suatu elemen dengan display:none, browser dapat memilih untuk tidak mengunduh gambar sampai display diatur ke nilai lain.

Hanya Opera yang mengunduh gambar saat Anda beralih displayke block. Semua browser lain segera mengunduhnya.

Gambar latar belakang elemen div akan dimuat jika div diatur ke 'display: none'.

Bagaimanapun, jika div yang sama memiliki orangtua dan orangtua itu diatur ke 'display: none', gambar latar belakang elemen anak tidak akan memuat . :)

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

Jika demikian, adakah cara untuk tidak memuat konten yang tidak perlu pada peramban seluler?

menggunakan <img src="" srcset="">

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

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

Jika Anda menjadikan gambar sebagai latar-gambar dari div di CSS, ketika div itu diatur ke 'display: none', gambar tidak akan memuat.

Hanya memperluas solusi Brent.

Anda dapat melakukan hal berikut untuk solusi CSS murni, itu juga membuat kotak img benar-benar berperilaku seperti kotak img dalam pengaturan desain responsif (itulah gunanya png transparan), yang sangat berguna jika desain Anda menggunakan responsif-dinamis - mengubah ukuran gambar.

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

Gambar hanya akan dimuat ketika kueri media yang dikaitkan dengan blok-lg dipicu dan ditampilkan: tidak ada yang berubah untuk menampilkan: blok. Png transparan digunakan untuk memungkinkan browser mengatur tinggi yang sesuai: rasio lebar untuk blok <img> Anda (dan dengan demikian gambar latar belakang) dalam desain yang cair (tinggi: otomatis; lebar: 100%).

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

Jadi Anda berakhir dengan sesuatu seperti berikut, untuk 3 viewports berbeda:

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

Dan hanya gambar ukuran viewport media default Anda yang dimuat selama pemuatan awal, kemudian setelah itu, tergantung pada viewport Anda, gambar akan dimuat secara dinamis.

Dan tidak ada javascript!

Untuk mencegah pengambilan sumber daya, gunakan <template>elemen Komponen Web .

Hai teman-teman saya berjuang dengan masalah yang sama, bagaimana tidak memuat gambar di ponsel.

Tapi saya menemukan solusi yang bagus. Pertama-tama buatlah tag img dan kemudian muatkan svg kosong pada atribut src. Sekarang Anda dapat mengatur URL Anda ke gambar sebagai gaya inline dengan konten: url ('tautan ke gambar Anda') ;. Sekarang bungkus tag img Anda dalam bungkus pilihan Anda.

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

Atur pembungkus untuk menampilkan tidak ada pada breakpoint di mana Anda tidak ingin memuat gambar. Css inline dari tag img sekarang diabaikan karena gaya elemen yang dibungkus pembungkus dengan tampilan tidak akan diabaikan, oleh karena itu gambar tidak dimuat, sampai Anda mencapai breakpoint di mana pembungkus memiliki blok tampilan.

Ini dia, cara yang sangat mudah untuk tidak memuat img di breakpoint seluler :)

Lihat codepen ini, untuk contoh yang berfungsi: http://codepen.io/fennefoss/pen/jmXjvo

Tidak. Gambar akan dimuat seperti biasa dan masih akan menggunakan bandwidth pengguna jika Anda mempertimbangkan penghematan bandwidth pengguna ponsel. Yang dapat Anda lakukan adalah menggunakan kueri media dan memfilter perangkat yang Anda inginkan untuk memuat gambar Anda. gambar harus ditetapkan sebagai gambar latar belakang div, dll dan BUKAN tag karena tag gambar akan memuat gambar terlepas dari apakah ukuran layar dan kueri media diatur.

Kemungkinan lain adalah menggunakan <noscript>tag dan menempatkan gambar di dalam <noscript>tag. Kemudian gunakan javascript untuk menghapusnoscript tag saat Anda membutuhkan gambar. Dengan cara ini Anda dapat memuat gambar sesuai permintaan menggunakan peningkatan progresif.

Gunakan polyfill ini yang saya tulis untuk membaca isi <noscript> tag di IE8

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

Gunakan @media query CSS, pada dasarnya kami hanya merilis sebuah proyek di mana kami memiliki gambar pohon yang sangat besar di desktop di samping tetapi tidak ditampilkan di layar tabel / seluler. Jadi mencegah gambar dari memuatnya cukup mudah

Berikut ini cuplikan kecil:

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

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

Anda dapat menggunakan CSS yang sama untuk ditampilkan dan disembunyikan dengan tampilan / visibilitas / opacity tetapi gambar masih dimuat, ini adalah kode aman yang paling gagal kami buat.

kita berbicara tentang gambar yang tidak dimuat di ponsel, kan? jadi bagaimana jika Anda baru saja melakukan @ media (lebar minimum: 400px) {background-image: thing.jpg}

bukankah itu hanya mencari gambar di atas lebar layar tertentu?

Trik untuk menggunakan tampilan: tidak ada dengan gambar adalah untuk menetapkannya id. Ini tidak ada banyak kode yang diperlukan untuk membuatnya berfungsi. Berikut adalah contoh menggunakan kueri media dan 3 lembar gaya. Satu untuk ponsel, satu untuk tablet, dan satu untuk desktop. Saya memiliki 3 gambar, gambar ponsel, tablet, dan desktop. Pada layar ponsel hanya gambar telepon yang akan ditampilkan, tablet hanya akan menampilkan gambar tablet, desktop menampilkan gambar komputer desktop. Berikut adalah contoh kode untuk membuatnya berfungsi:

Kode sumber:

<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 telepon yang tidak memerlukan kueri media. Ini ponsel # img yang membuatnya bekerja:

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

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

Tablet css:

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

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

Dan css desktop:

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

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

Semoga beruntung dan beri tahu saya cara kerjanya untuk Anda.