Her duyarlı web sitesi geliştirme öğreticisi display:none, web sitesinin daha hızlı yüklenmesi için içeriğin mobil tarayıcılara yüklenmesini gizlemek için CSS özelliğinin kullanılmasını önerir . Bu doğru mu? Does display:nonegörüntüleri yüklemeyin yoksa hala mobil tarayıcı üzerinde içeriği yüklemek geliyor? Mobil tarayıcılara gereksiz içerik yüklenmesini önlemenin bir yolu var mı?

Tarayıcılar daha akıllı hale geliyor. Bugün tarayıcınız (sürüme bağlı olarak) yararlı olmadığını belirleyebiliyorsa resim yüklemesini atlayabilir.

Resmin bir display:none stile sahip ancak boyutu komut dosyası tarafından okunabilir. Üst öğe gizlenmişse Chrome v68.0 resim yüklemez.

Orada kontrol edebilirsiniz: http://jsfiddle.net/tnk3j08s/

Ayrıca tarayıcınızın geliştirici araçlarının "ağ" sekmesine bakarak da kontrol etmiş olabilirsiniz.

Tarayıcı küçük bir CPU bilgisayarındaysa, görüntüyü işlemek (ve sayfayı düzenlemek) zorunda kalmamak tüm oluşturma işlemini daha hızlı hale getirecektir, ancak bunun bugün gerçekten mantıklı bir şey olduğundan şüphe ediyorum.

Basitçe belgeye IMG öğesi ekleyin (veya IMG ayarlanmamış olabilir size yüklenmesini görüntüyü engellemek istiyorsanız srciçin niteliği "data:"veya "about:blank").

Görüntüyü CSS'de bir div öğesinin arka plan görüntüsü yaparsanız, bu div "display: none" olarak ayarlandığında görüntü yüklenmez. CSS devre dışı bırakıldığında, yine de yüklenmez, çünkü CSS devre dışıdır.

Cevap basit bir evet ya da hayır kadar kolay değil. Son zamanlarda yaptığım bir testin sonuçlarına göz atın:

• Chrome'da: Tüm 8 ekran görüntüsü- * resim yüklendi (img 1)
• Firefox'ta: Görüntülenmekte olan yalnızca 1 ekran görüntüsü- * resmi yüklendi (img 2)

Bu yüzden daha fazla kazma sonra buldum bu img varlıklarını yüklenirken her tarayıcı kolları css ekran dayalı açıklar ki,: none;

Blog gönderisinden alıntı:

• Chrome ve Safari (WebKit):
  WebKit, eşleşmeyen bir medya sorgusuyla arka plan uygulanması dışında dosyayı her seferinde indirir.
• Firefox:
  Stiller gizlenmişse Firefox arka plan resmi ile çağrılan görüntüyü indirmez, ancak yine de img etiketlerinden öğeler indirir.
• Opera:
  Firefox'un yaptığı gibi Opera da gereksiz arka plan resimleri yüklemez.
• Internet Explorer:
  IE, WebKit gibi, görüntü olsalar bile arka plan görüntülerini indirir: none; IE6 ile garip bir şey görünüyor: Arka plan resmi ve ekrana sahip öğeler: ayarlanmış hiçbir satır içi indirilmeyecek ... Ancak bu stiller satır içi uygulanmazsa olacaktır.

HTML5 <picture>etiketi, ekran genişliğine bağlı olarak doğru görüntü kaynağını çözmenize yardımcı olur

Görünüşe göre tarayıcıların davranışı son 5 yılda çok fazla değişmedi ve çoğu display: none, üzerlerinde bir özellik ayarlanmış olsa bile gizli görüntüleri indirecekti .

Bir medya sorguları çözümü olsa da , yalnızca resim CSS'de arka plan olarak ayarlandığında yararlı olabilir.

Ben (sorununa sadece JS çözümü vardır düşünüyordum ederken tembel yük , picturefill , vs.), HTML5 ile kutu çıkıyor güzel bir saf HTML çözümü vardır ortaya çıktı.

Ve bu <picture>etiket.

İşte nasıl MDN bunu anlatır:

HTML <picture>öğesi birden belirtmek için kullanılan bir kapsayıcıdır <source>bir özgün bağlanma açısından unsurları <img>içerdiği. Tarayıcı, sayfanın geçerli düzenine (görüntünün içinde görüntüleneceği kutunun kısıtlamaları) ve görüntüleneceği cihaza (örneğin normal veya hiDPI bir cihaz) göre en uygun kaynağı seçecektir.

İşte nasıl kullanılacağı:

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

Arkasındaki mantık

Tarayıcı img, yalnızca medya kurallarının hiçbiri geçerli değilse etiketin kaynağını yükler . Ne zaman <picture>eleman tarayıcı tarafından desteklenmez, tekrar gösterilmeye son çare olacaktır imgetiketi.

Normalde en küçük resmi kaynak olarak koyarsınız <img>ve bu nedenle daha büyük ekranlar için ağır görüntüleri yüklemezsiniz. Tersine, bir medya kuralı geçerliyse, kaynağın kaynağı <img>indirilmez, bunun yerine ilgili <source>etiketin URL'sini indirir .

Buradaki tek tuzak, öğe tarayıcı tarafından desteklenmiyorsa, yalnızca küçük resmi yükleyeceğidir. Öte yandan 2017'de mobil ilk yaklaşımda düşünmeli ve kodlamalıyız.

Birisi çok çıkmadan önce, şu anda mevcut tarayıcı desteği <picture>:

Masaüstü tarayıcılar

Mobil tarayıcılar

Kullanabileceğim tarayıcı desteği hakkında daha fazla bilgi .

İyi olan şey html5please'ın cümlesinin bir yedeği ile kullanmaktır . Ben şahsen onların tavsiyelerini almaya niyetliyim.

W3C'nin özelliklerinde bulabileceğiniz etiket hakkında daha fazla bilgi . Burada bahsetmemin önemli olduğunu düşündüğüm bir feragatname var:

pictureEleman benzer görünümlü farklıdır videove audioelemanlar. Hepsinde sourceeleman bulunurken src, eleman bir pictureelemanın içine yerleştirildiğinde ve kaynak seçim algoritması farklı olduğunda kaynak elemanın niteliğinin bir anlamı yoktur . Ayrıca, pictureöğenin kendisi hiçbir şey görüntülemez; yalnızca içerdiği imgöğesi için birden çok URL'den seçim yapmasını sağlayan bir bağlam sağlar.

Öyleyse söylediği şey, sadece bir görüntü yüklerken, görüntüye bir bağlam sağlayarak performansı artırmanıza yardımcı olmasıdır.

Görüntüyü küçük cihazlarda gizlemek için yine de biraz CSS büyüsü kullanabilirsiniz:

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

Böylece tarayıcı olacak göstermez gerçek resmini ve sadece indirir 1x1(eğer birden fazla kez kullanırsanız önbelleğe alınabilir) piksel görüntü. Eğer olsa da, unutmayın <picture>etiketi bile DESCKTOP ekranlarında, tarayıcı tarafından desteklenmeyen gerçek görüntü olmaz (kesinlikle bir polyfill yedeği var gerekir böylece) görüntülenir.

Evet, yalnızca görüntüyü oluşturmak zorunda olmadığı ve ekranda sıralamak için daha az bir öğe olduğu için daha hızlı, hafifçe oluşturulur.

Yüklenmesini istemiyorsanız, daha sonra bir <img>etiket içeren html'yi yükleyebileceğiniz bir DIV'yi boş bırakın .

Daha önce bahsettiğim gibi kundakçı veya wireshark kullanmayı deneyin ve dosyaların olsa bile aktarıldığını göreceksiniz display:none.

Opera, ekran hiçbiri olarak ayarlandığında görüntüyü yüklemeyecek tek tarayıcıdır. Opera şimdi web setine taşındı ve ekranı hiçbiri olarak ayarlanmamış olsa bile tüm görüntüleri oluşturacak.

İşte bunu kanıtlayacak bir test sayfası:

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

** 2019 Cevabı **

Normal bir durumda display:nonegörüntünün indirilmesini engellemez

/*will be downloaded*/

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

Ancak bir ata öğesinde varsa display:none, alt öğenin görüntüleri indirilmez

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

Görüntünün indirilmesini engelleyen diğer durumlar:

1- Hedef öğe mevcut değil

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

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

2- Farklı görüntüler yükleyen iki eşit sınıf

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

Kendiniz için buradan izleyebilirsiniz: https://codepen.io/juanmamenendez15/pen/dLQPmX

Quirks Modu: görüntüler ve ekran: yok

Görüntü, display: noneöğesinin bulunduğu bir öğeye sahip olduğunda veya içinde display:noneolduğunda, tarayıcı display başka bir değere ayarlanana kadar görüntüyü indirmemeyi tercih edebilir .

Sadece Opera Geçiş görüntüyü indirir displayiçin block. Diğer tüm tarayıcılar hemen indirir.

Div öğesi 'display: none' olarak ayarlanmışsa, div öğesinin arka plan görüntüsü yüklenir .

Her neyse, aynı div'in bir üst öğesi varsa ve bu üst öğe 'display: none' olarak ayarlanmışsa, alt öğenin arka plan resmi yüklenmez . :)

Bootstrap kullanan örnek:

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

Öyleyse, gereksiz içeriği mobil tarayıcılara yüklememenin bir yolu var mı?

kullanım <img src="" srcset="">

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

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

Görüntüyü CSS'de bir div öğesinin arka plan görüntüsü yaparsanız, bu div 'display: none' olarak ayarlandığında görüntü yüklenmez.

Brent'in çözümünü genişletiyoruz.

Saf bir CSS çözümü için aşağıdakileri yapabilirsiniz, ayrıca img kutusunu aslında duyarlı bir tasarım ayarında (şeffaf png'nin amacı budur) bir img kutusu gibi davranmasını sağlar; görüntüleri yeniden boyutlandırma.

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

Görüntü yalnızca visible-lg-block'a bağlı medya sorgusu tetiklendiğinde ve display: none: display: block olarak değiştirildiğinde yüklenir. Saydam png, tarayıcının akıcı bir tasarımda (yükseklik: otomatik; genişlik:% 100) <img> bloğunuz (ve böylece arka plan görüntüsü) için uygun yükseklik: genişlik oranlarını ayarlamasına izin vermek için kullanılır.

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

Böylece 3 farklı görüntü alanı için aşağıdakine benzer bir şey elde edersiniz:

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

Ve ilk yükleme sırasında yalnızca varsayılan ortam görüntü alanı boyutundaki görüntüleriniz yüklenir, daha sonra görünümünüze bağlı olarak görüntüler dinamik olarak yüklenir.

Ve javascript yok!

Kaynak getirilmesini önlemek için <template>Web Bileşenleri öğesini kullanın .

Merhaba arkadaşlar ben aynı sorun, mobil bir görüntü yüklemek için nasıl mücadele ediyordu.

Ama iyi bir çözüm buldum. Önce bir img etiketi yapın ve ardından src özelliğine boş bir svg yükleyin. Artık URL'nizi resme, içeriğe sahip bir satır içi stil olarak ayarlayabilirsiniz: url ('resminize bağlantı') ;. Şimdi img etiketinizi seçtiğiniz bir paketleyiciye sarın.

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

Sarmalayıcıyı, görüntüyü yüklemek istemediğiniz kesme noktasında hiçbiri göstermeyecek şekilde ayarlayın. İmg etiketinin satır içi css'si yok sayılır, çünkü hiçbiri görüntülenmeyen bir sargıya sarılmış bir öğenin stili yok sayılır, bu nedenle sargının görüntü bloğunun bulunduğu bir kesme noktasına ulaşana kadar görüntü yüklenmez.

İşte, mobil kesme noktasına bir img yüklememek için gerçekten kolay bir yol :)

Çalışan bir örnek için bu kod penceresine göz atın: http://codepen.io/fennefoss/pen/jmXjvo

Hayır. Cep telefonu kullanıcı bant genişliği tasarrufunu düşünüyorsanız, görüntü her zamanki gibi yüklenecek ve kullanıcının bant genişliğini kullanmaya devam edecektir. resim etiketi, ekran boyutu ve ortam sorgusu ayarlı olsa da olmasa da, resim etiketi görüntüyü yükleyeceğinden, bir etiketin vb. arka plan resmi olarak ayarlanmamalıdır.

Başka bir olasılık da bir <noscript>etiket kullanmak ve resmi <noscript>etiketin içine yerleştirmektir . Ardından noscriptresmi istediğiniz gibi etiketi kaldırmak için javascript kullanın . Bu şekilde, aşamalı iyileştirmeyi kullanarak isteğe bağlı görüntüler yükleyebilirsiniz.

IE8'deki <noscript>etiketlerin içeriğini okumak için yazdığım bu çoklu dolguyu kullanın

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

@Media CSS sorgusunu kullanın, temelde sadece masaüstünde bir ağacın muazzam bir görüntüsüne sahip olduğumuz ancak masa / mobil ekranlarda göstermediğimiz bir proje yayınlıyoruz. Bu nedenle görüntünün yüklenmesini oldukça kolay hale getirin

İşte küçük bir pasaj:

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

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

Ekran / görünürlük / opaklık ile göstermek ve gizlemek için aynı CSS'yi kullanabilirsiniz, ancak görüntü hala yükleniyordu, bu geldiğimiz en başarısız güvenli koddu.

mobil cihazlara yüklenmeyen resimlerden bahsediyoruz, değil mi? Peki ya bir @media (min genişlik: 400 piksel) yaptıysanız {background-image: thing.jpg}

yalnızca belirli bir ekran genişliğinin üstündeki görüntüyü aramaz mı?

Display: kullanmanın hilesi, resimli hiçbiri onlara bir kimlik atamak değildir. Bu, çalışması için gereken çok fazla kod olmadığıydı. Ortam sorguları ve 3 stil sayfası kullanan bir örnek. Biri telefon, diğeri tablet ve diğeri masaüstü için. 3 resmim, telefonumun görüntüsü, tabletim ve masaüstüm var. Telefon ekranında yalnızca telefonun bir görüntüsü görüntülenir, bir tablet yalnızca tablet görüntüsünü gösterir, masaüstü bilgisayar görüntüsünde bir masaüstü görüntülenir. İşte çalışması için bir kod örneği:

Kaynak kodu:

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

Medya sorgusu gerektirmeyen telefon CSS'si. Onun çalışmasını sağlayan img # telefon:

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

Ve masaüstü css:

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

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

İyi şanslar ve bunun sizin için nasıl çalıştığını bana bildirin.