บทแนะนำการพัฒนาเว็บไซต์ที่ตอบสนองต่อทุกครั้งแนะนำให้ใช้display:noneคุณสมบัติ CSS เพื่อซ่อนเนื้อหาจากการโหลดบนเบราว์เซอร์มือถือเพื่อให้เว็บไซต์โหลดเร็วขึ้น มันจริงหรอ? ไม่display:noneโหลดภาพหรือยังโหลดเนื้อหาบนเบราว์เซอร์มือถือ? มีวิธีใดที่จะป้องกันการโหลดเนื้อหาที่ไม่จำเป็นในเบราว์เซอร์มือถือหรือไม่?

เบราว์เซอร์เริ่มฉลาดขึ้น วันนี้เบราว์เซอร์ของคุณ (ขึ้นอยู่กับรุ่น) อาจข้ามการโหลดรูปภาพหากสามารถระบุได้ว่ามันไม่มีประโยชน์

รูปภาพมีdisplay:noneสไตล์ แต่สคริปต์อาจมีขนาดอ่านได้ Chrome v68.0 ไม่โหลดภาพหากมีการซ่อนพาเรนต์

คุณสามารถตรวจสอบได้ที่นั่น: http://jsfiddle.net/tnk3j08s/

คุณสามารถตรวจสอบได้โดยดูที่แท็บ "เครือข่าย" ของเครื่องมือนักพัฒนาเบราว์เซอร์ของคุณ

โปรดทราบว่าหากเบราว์เซอร์อยู่ในคอมพิวเตอร์ซีพียูขนาดเล็กการไม่แสดงภาพ (และจัดวางหน้า) จะทำให้การเรนเดอร์ทั้งหมดเร็วขึ้น แต่ฉันสงสัยว่านี่เป็นสิ่งที่สมเหตุสมผลจริงๆในปัจจุบัน

หากคุณต้องการป้องกันไม่ให้ภาพโหลดคุณอาจไม่เพิ่มองค์ประกอบ IMG ในเอกสารของคุณ (หรือตั้งค่าsrcแอตทริบิวต์IMG เป็น"data:"หรือ"about:blank")

หากคุณทำให้ภาพเป็นภาพพื้นหลังของ div ใน CSS เมื่อ div นั้นถูกตั้งค่าเป็น "display: none" ภาพจะไม่โหลด เมื่อปิดการใช้งาน CSS ก็ยังคงไม่โหลดเพราะดี CSS ถูกปิดใช้งาน

คำตอบนั้นไม่ง่ายอย่างที่คิดว่าใช่หรือไม่ใช่ ตรวจสอบผลการทดสอบที่ฉันทำเมื่อเร็ว ๆ นี้:

• ใน Chrome: โหลดภาพหน้าจอทั้งหมด 8 ภาพ (img 1)
• ใน Firefox: โหลดเฉพาะภาพสกรีนช็อต 1 ภาพที่แสดงอยู่ในปัจจุบัน (img 2)

ดังนั้นหลังจากขุดเพิ่มเติมฉันพบสิ่งนี้ซึ่งอธิบายว่าแต่ละเบราว์เซอร์จัดการกับการโหลดเนื้อหา img ตาม css display: none;

ตัดตอนมาจากบล็อกโพสต์:

• Chrome และ Safari (WebKit):
  WebKit ดาวน์โหลดไฟล์ทุกครั้งยกเว้นเมื่อมีการใช้พื้นหลังผ่านการสืบค้นสื่อที่ไม่ตรงกัน
• Firefox:
  Firefox จะไม่ดาวน์โหลดภาพที่เรียกว่าภาพพื้นหลังหากสไตล์ถูกซ่อนอยู่ แต่จะยังดาวน์โหลดเนื้อหาจากแท็ก img
• Opera:
  เช่นเดียวกับ Firefox Opera จะไม่โหลดภาพพื้นหลังที่ไร้ประโยชน์
• Internet Explorer:
  IE เช่น WebKit จะดาวน์โหลดภาพพื้นหลังแม้ว่าจะมีการแสดงผล: ไม่มี; มีบางอย่างผิดปกติเกิดขึ้นกับ IE6: องค์ประกอบที่มีภาพพื้นหลังและจอแสดงผล: ไม่มีการดาวน์โหลดแบบอินไลน์ที่กำหนด ...

<picture>แท็กHTML5 จะช่วยให้คุณแก้ไขแหล่งรูปภาพที่ถูกต้องโดยขึ้นอยู่กับความกว้างของหน้าจอ

เห็นได้ชัดว่าพฤติกรรมของเบราว์เซอร์ไม่ได้เปลี่ยนแปลงไปมากในช่วง 5 ปีที่ผ่านมาและหลายคนยังคงดาวน์โหลดภาพที่ซ่อนอยู่แม้ว่าจะมีการdisplay: noneตั้งค่าคุณสมบัติไว้ก็ตาม

แม้ว่าจะมีการสอบถามสื่อการแก้ปัญหามันจะมีประโยชน์เฉพาะเมื่อภาพถูกตั้งเป็นพื้นหลังใน CSS

ในขณะที่ฉันคิดว่ามีเพียงวิธีการแก้ปัญหา JS (ปัญหาโหลดขี้เกียจ , picturefill , ฯลฯ ), ปรากฏว่ามีวิธีการแก้ปัญหา HTML บริสุทธิ์ที่ดีที่มาพร้อมกับ HTML5

และนั่นคือ<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>แท็กที่เกี่ยวข้อง

ข้อผิดพลาดเฉพาะที่นี่คือหากองค์ประกอบไม่ได้รับการสนับสนุนโดยเบราว์เซอร์ก็จะโหลดภาพขนาดเล็กเท่านั้น ในทางกลับกันในปี 2560 เราควรคิดและกำหนดรหัสในแนวทางแรกของมือถือ

และก่อนที่จะมีใครออกไปด้วยนี่คือการสนับสนุนเบราว์เซอร์ปัจจุบันสำหรับ<picture>:

เบราว์เซอร์เดสก์ท็อป

เบราว์เซอร์มือถือ

เพิ่มเติมเกี่ยวกับการสนับสนุนเบราว์เซอร์ที่คุณสามารถค้นหาบนฉันสามารถใช้

สิ่งที่ดีคือว่า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>เบราว์เซอร์ไม่รองรับแท็กแม้ในหน้าจอ descktop ภาพที่แท้จริงจะไม่ปรากฏ (ดังนั้นคุณจะต้องสำรองข้อมูล polyfill ไว้ที่นั่น)

ใช่มันจะเรนเดอร์เร็วขึ้นเล็กน้อยเพียงเพราะมันไม่จำเป็นต้องเรนเดอร์รูปภาพและเป็นองค์ประกอบที่น้อยกว่าในการเรียงลำดับบนหน้าจอ

หากคุณไม่ต้องการโหลดให้ปล่อย DIV ว่างไว้ซึ่งคุณสามารถโหลด html ลงไปในภายหลังซึ่งมี<img>แท็ก

ลองใช้ firebug หรือ wireshark ตามที่ได้กล่าวมาแล้วและคุณจะเห็นว่าไฟล์นั้นได้รับการถ่ายโอนแม้ว่าdisplay:noneจะมีอยู่ก็ตาม

Opera เป็นเบราว์เซอร์เดียวเท่านั้นที่จะไม่โหลดรูปภาพหากตั้งค่าหน้าจอเป็นไม่มี Opera ได้ย้ายไปยัง webkit แล้วและจะแสดงรูปภาพทั้งหมดแม้ว่าการแสดงผลจะถูกตั้งค่าเป็น none

นี่คือหน้าทดสอบที่จะพิสูจน์ได้:

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

** 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- คลาสที่เท่าเทียมกันสองโหลดภาพที่แตกต่าง

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

โหมด Quirks: ภาพและจอแสดงผล: ไม่มี

เมื่อภาพมีdisplay: noneหรืออยู่ในองค์ประกอบด้วย display:noneเบราว์เซอร์อาจเลือกที่จะไม่ดาวน์โหลดภาพจนกว่าdisplay จะมีการตั้งค่าเป็นค่าอื่น

เพียงดาวน์โหลด Opera ภาพเมื่อคุณเปลี่ยนไปdisplay blockเบราว์เซอร์อื่น ๆ ทั้งหมดดาวน์โหลดทันที

ภาพพื้นหลังขององค์ประกอบ div จะโหลดหากตั้งค่า div เป็น 'display: none'

อย่างไรก็ตามถ้าที่ div เดียวกันมีพ่อแม่และผู้ปกครองที่ถูกกำหนดเป็น 'display: none' ที่ภาพพื้นหลังขององค์ประกอบเด็กจะไม่สามารถโหลด :)

ตัวอย่างการใช้ 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>

ถ้าเป็นเช่นนั้นมีวิธีที่จะไม่โหลดเนื้อหาที่ไม่จำเป็นในเบราว์เซอร์มือถือหรือไม่?

ใช้ <img src="" srcset="">

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

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

หากคุณทำให้ภาพเป็นภาพพื้นหลังของ div ใน CSS เมื่อ 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: block png โปร่งใสใช้เพื่ออนุญาตให้เบราว์เซอร์ตั้งค่าความสูงที่เหมาะสม: อัตราส่วนความกว้างสำหรับบล็อก <img> ของคุณ (และทำให้ภาพพื้นหลัง) ในรูปแบบของเหลว (ความสูง: อัตโนมัติ; ความกว้าง: 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">

และมีเพียงขนาดอิมเมจสื่อมุมมองเริ่มต้นของคุณเท่านั้นที่โหลดในระหว่างการโหลดครั้งแรกจากนั้นหลังจากนั้นขึ้นอยู่กับวิวพอร์ตของคุณรูปภาพจะโหลดแบบไดนามิก

และไม่มีจาวาสคริปต์!

เพื่อป้องกันไม่ให้เรียกทรัพยากรใช้องค์ประกอบของคอมโพเนนต์ของเว็บ<template>

สวัสดีพวกฉันกำลังดิ้นรนกับปัญหาเดียวกันวิธีการโหลดภาพบนมือถือ

แต่ฉันคิดว่าทางออกที่ดี ก่อนอื่นให้สร้างแท็ก img จากนั้นโหลด svg ที่ว่างเปล่าในแอตทริบิวต์ src ตอนนี้คุณสามารถตั้งค่า URL ของคุณเป็นรูปแบบอินไลน์พร้อมเนื้อหา: url ('ลิงก์ไปยังรูปภาพของคุณ'); ตอนนี้ใส่แท็ก img ของคุณใน wrapper ที่คุณเลือก

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

ตั้งค่า wrapper เพื่อแสดง none บนเบรกพอยต์ที่คุณไม่ต้องการโหลดภาพ css แบบอินไลน์ของแท็ก img จะถูกละเว้นเนื่องจากรูปแบบขององค์ประกอบที่ห่อใน wrapper ที่ไม่มีการแสดงผลจะไม่ถูกละเว้นดังนั้นภาพจะไม่ถูกโหลดจนกว่าคุณจะถึงจุดพักที่แผ่นหุ้มมีบล็อกการแสดงผล

ไปแล้ววิธีง่ายๆในการไม่โหลด img บนเบรกพอยต์มือถือ :)

ตรวจสอบ codepen นี้เพื่อเป็นตัวอย่างการทำงาน: http://codepen.io/fennefoss/pen/jmXjvo

ไม่รูปภาพจะถูกโหลดตามปกติและยังคงใช้แบนด์วิดท์ของผู้ใช้หากคุณกำลังพิจารณาการประหยัดแบนด์วิดท์ของผู้ใช้โทรศัพท์มือถือสิ่งที่คุณทำได้คือใช้แบบสอบถามสื่อและกรองอุปกรณ์ที่คุณต้องการโหลดรูปภาพของคุณ ภาพจะต้องตั้งเป็นภาพพื้นหลังของ div ฯลฯ และไม่ใช่แท็กเนื่องจากแท็กภาพจะโหลดภาพโดยไม่คำนึงว่าขนาดหน้าจอและชุดข้อความค้นหาสื่อ

ความเป็นไปได้อีกอย่างหนึ่งคือการใช้<noscript>แท็กและวางรูปภาพไว้ภายใน<noscript>แท็ก จากนั้นใช้จาวาสคริปต์เพื่อลบnoscriptแท็กตามที่คุณต้องการรูปภาพ ด้วยวิธีนี้คุณสามารถโหลดรูปภาพตามต้องการโดยใช้การเพิ่มประสิทธิภาพแบบก้าวหน้า

ใช้โพลีฟิลล์นี้ฉันเขียนเพื่ออ่านเนื้อหาของ<noscript>แท็กใน IE8

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

ใช้ @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 เดียวกันนี้เพื่อแสดงและซ่อนด้วยจอแสดงผล / การมองเห็น / ความทึบ แต่ภาพยังโหลดอยู่นี่เป็นรหัสที่ปลอดภัยที่สุดที่เราล้มเหลว

เรากำลังพูดถึงรูปภาพที่ไม่ได้โหลดบนมือถือใช่ไหม ถ้าคุณเพิ่งทำ @media (ความกว้างต่ำสุด: 400px) {background-image: thing.jpg}

มันจะไม่มองหาภาพที่อยู่เหนือความกว้างของหน้าจอใช่หรือไม่

เคล็ดลับในการใช้จอแสดงผล: ไม่มีภาพที่มีการกำหนด 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#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%;
    }
}

ขอให้โชคดีและแจ้งให้เราทราบว่ามันทำงานอย่างไรสำหรับคุณ