วิธีซ่อนไอคอน“ ไม่พบรูปภาพ” แบบเงียบ ๆ เมื่อไม่พบรูปภาพต้นฉบับของ src

92

คุณรู้วิธีซ่อนไอคอน"ไม่พบรูปภาพ"แบบคลาสสิกจากหน้า HTML ที่แสดงผลเมื่อไม่พบไฟล์รูปภาพหรือไม่

วิธีการทำงานใด ๆ โดยใช้ JavaScript / jQuery / CSS?

คำตอบของ Andy นั้นถูกต้องอย่างไรก็ตามคุณอาจต้องการใช้ style.vsibility แทน หากคุณตั้งค่าการมองเห็นองค์ประกอบจะยังคงมีพื้นที่บนเอกสารของคุณจึงไม่มีการเคลื่อนไหวของเอกสารที่น่าตลก

— Christian

ฉันไม่เห็นประเด็น คุณไม่ควรพยายามเข้าถึงทรัพยากรที่มีอยู่จากโค้ด html ของคุณ การใช้ javascript เพื่อซ่อน ressources ที่จัดการไม่ดีดูเหมือนจะเป็นวิธีแก้ปัญหาที่น่าเกลียดสำหรับฉัน

— Boris Delormas

1

@Kaaviar คุณพลาดประเด็นนี้มีภาพ Hotlink จำนวนมากเสียที่ Stack Overflow เนื่องจากรูปภาพสามารถใช้ได้ในขณะที่โพสต์ แต่ไม่สามารถใช้งานได้ในอีกหลายเดือนต่อมา ภาพเหล่านี้ถูกซ่อนไว้อย่างเงียบ ๆ และนุ่มนวล

— systempuntoout

1

@systempuntoout: ฉันไม่แน่ใจว่าทำไมทั้งสองได้รับการปฏิบัติที่แตกต่างกัน ฉันทดสอบรูปภาพที่เสียใน Firefox และ Chrome มันไม่แสดงใน Firefox แต่แสดงว่าเสียใน Chrome เป็นที่ชัดเจนว่านี่เป็นสิ่งที่ Firefox กำลังตัดสินใจด้วยตัวเองเนื่องจากดูเหมือนว่าสไตล์ใด ๆ จะไม่ส่งผลกระทบต่อมัน btw ทำงานได้ดีใน StackPrinter

— Andy E

2

@systempuntoout: ฉันพบข้อมูลเพิ่มเติมเล็กน้อยเกี่ยวกับการทำงานของ Firefox กับสิ่งนี้ ดูซอที่อัปเดตและ [คลาสหลอกที่เป็นกรรมสิทธิ์:-moz-broken] ( developer.mozilla.org/en/CSS/:-moz-broken ) ฉันเพิ่งคิดกับตัวเองก่อนหน้านี้ว่าคลาสหลอกจะมีประโยชน์สำหรับการจัดแต่งทรงผมภาพที่เสีย

— Andy E

103

คุณสามารถใช้onerrorเหตุการณ์ใน JavaScript เพื่อดำเนินการเมื่อโหลดรูปภาพไม่สำเร็จ:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

ใน jQuery (เนื่องจากคุณถาม):

$("#myImg").error(function () { 
    $(this).hide(); 
});

หรือสำหรับภาพทั้งหมด:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

คุณควรใช้visibility: hiddenแทน.hide()หากการซ่อนรูปภาพอาจทำให้เค้าโครงเปลี่ยนไป ไซต์จำนวนมากบนเว็บใช้รูปภาพ "ไม่มีรูปภาพ" เริ่มต้นแทนโดยชี้srcแอตทริบิวต์ไปที่รูปภาพนั้นเมื่อตำแหน่งรูปภาพที่ระบุไม่พร้อมใช้งาน

— แอนดี้อี
แหล่งที่มา

1

แอนดี้ - โซลูชัน 'ระดับโลก' จะใช้กับรูปภาพทั้งหมดได้อย่างไร ?? ฉันคิดว่ามันจะง่ายพอถ้าพวกเขาทั้งหมดอยู่ใน div เดียวกัน - แค่สงสัยเกี่ยวกับภาพทั้งหมดในเอกสาร ...

— jim tollan

@jAndy: ฉันค่อนข้างแน่ใจว่าเป็นอย่างนั้น แต่ความคิดเห็นของคุณทำให้ฉันตรวจสอบอีกครั้ง Google ส่งคืนหน้า w3schoolsฉบับย่อนี้(ขออภัย David หากคุณกำลังอ่านข้อความนี้) ซึ่งระบุว่ารองรับเบราว์เซอร์ข้าม

— Andy E

2

@jim: หากคุณใช้ jQuery คุณสามารถใช้เหตุการณ์กับภาพทั้งหมดได้ $("img").error(function () { /*...*/ });เพียงแค่ใช้ตัวเลือกแท็กเช่น

— Andy E

@Andy E: ฟังดูดี +1 คำถามที่น่าสนใจต่อไปจะเป็น " error" boundable ด้วยหรือlive() delegate()

— jAndy

3

visibilityจะดีกว่าเนื่องจากdisplayสามารถทำลายเค้าโครงได้

— gblazex

115

<img onerror='this.style.display = "none"'>

— Gary Willoughby
แหล่งที่มา

โชคไม่ดีที่ฉันไม่สามารถใช้โซลูชันนี้ได้เนื่องจากเนื้อหา html ถูกดาวน์โหลดจากเว็บไซต์ของบุคคลที่สามผ่าน Json และฉันไม่สามารถแก้ไขได้ ขอบคุณต่อไป

— systempuntoout

9

ยอดเยี่ยมสิ่งที่ฉันต้องการ เรียบง่ายและไม่ซับซ้อนเหมาะกับเทมเพลต!

— สูงสุด

แม้ว่าจะอายุมากแล้ว แต่ก็เยี่ยมมาก! มีวิธีซ่อนแท็ก <a> รอบภาพที่ซ่อนอยู่ตอนนี้ด้วยหรือไม่

— SJDS

9

ฉันได้แก้ไขโซลูชันที่แนะนำโดย Gary Willoughby เล็กน้อยเนื่องจากแสดงไอคอนรูปภาพที่เสีย วิธีแก้ปัญหาของฉัน:

    <img src="..." style="display: none" onload="this.style.display=''">

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

— สายสะพาย
แหล่งที่มา

1

... และผู้ใช้จะไม่เห็นอะไรเลยหากปิดการใช้งานจาวาสคริปต์!

— yckart

4

@yckart ถ้าผู้ใช้ปิดการใช้งานจาวาสคริปต์แอปพลิเคชั่นเว็บที่มีประโยชน์ส่วนใหญ่จะไม่ทำงานต่อไป ...

— กลัว

<img src="..." onerror="this.style.display = 'none'"/>อาจทำงานได้ดีขึ้นสำหรับกรณีเบราว์เซอร์แบบ half-loaded และ non-js?

6

หากต้องการซ่อนทุกข้อผิดพลาดของรูปภาพเพียงเพิ่ม JavaScript นี้ที่ด้านล่างของหน้าของคุณ (ก่อนแท็กเนื้อหาปิด):

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

— Q_Mlilo
แหล่งที่มา

นี่เป็นแนวทางที่ฉันชอบเพราะมันค่อนข้างจะช่วยให้มั่นใจได้ว่าเหตุการณ์ที่เกิดข้อผิดพลาดจะถูกผูกไว้ก่อนที่ภาพจะผิดพลาดและคุณไม่จำเป็นต้องเพิ่มแอตทริบิวต์ onerror ให้กับแท็กรูปภาพแต่ละแท็ก อย่าลืมใส่รหัสนี้ไว้หลังแท็กรูปภาพของคุณทั้งหมด แต่ก่อนจาวาสคริปต์อื่น ๆ ที่อยู่ใน <body> มิฉะนั้นการโหลด JS ภายนอกที่บล็อกอาจทำให้เกิดการดำเนินการหลังจากเกิดข้อผิดพลาดของรูปภาพ

— galatians

สิ่งนี้ใช้ได้กับฉันพร้อมกับคำแนะนำจากชาวกาลาเทียจำเป็นต้องให้ JS นี้ดำเนินการก่อนสิ่งใดที่อาจทำให้ล่าช้า

— Adamz

สิ่งนี้ตอบคำถามเดิม แต่เป็นกระบวนการทางเดียว ในการทำให้ภาพที่โหลดในภายหลังสามารถมองเห็นได้อีกครั้งให้เพิ่มเหตุการณ์การโหลดด้วย allimgs [i] .onload = function () {this.style.visibility = "มองเห็นได้"; };

— TRT 2511

5

อาจจะตอบช้าหน่อย แต่นี่คือความพยายามของฉัน เมื่อฉันประสบปัญหาเดียวกันฉันได้แก้ไขโดยใช้ div ของขนาดของรูปภาพและการตั้งค่า background-image เป็น div นี้ หากไม่พบรูปภาพ Div จะแสดงผลแบบโปร่งใสดังนั้นทุกอย่างจึงเสร็จสิ้นโดยไม่ต้องใช้โค้ด java-script

— Adway Lele
แหล่งที่มา

4

การค้นคว้าอย่างรวดเร็วเกี่ยวกับ คำตอบของAndy Eไม่สามารถlive()ผูกมัดerrorได้

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

ดังนั้นคุณต้องไปเช่น

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

เชื่อมโยงโดยตรงerror event handlerกับการสร้างองค์ประกอบใหม่

— เจแอนดี้
แหล่งที่มา

2

+1 เหตุผลก็คือเหตุการณ์onerror DOM ไม่เกิดฟอง ถ่ายทอดสดและมอบหมายงานโดยการวางตัวจัดการเหตุการณ์เพิ่มเติมตามลำดับชั้นของ DOM และจับภาพเหตุการณ์ในขณะที่มันเกิดขึ้น แน่นอนนักพัฒนา jQuery ได้แก้ไขปัญหานี้สำหรับบางเหตุการณ์เช่นโฟกัสและเบลอ

— Andy E

@Andy E: เย้พวกเขาแล้ว workedaround errorว่าอาจจะไม่เลวร้ายที่สุดของความคิดที่จะทำสิ่งที่คล้ายกันสำหรับ ฟังดูเหมือนnice to haveสำหรับฉัน

— jAndy

3

ฉันพบวิธีที่ดีในการทำเช่นนี้ในขณะที่ยังใช้งานได้เมื่อใช้ng-srcคำสั่งใน Angular.js และชอบ ...

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

โดยพื้นฐานแล้วเป็น GIF โปร่งใสที่สั้นที่สุด (ดังที่เห็น http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% D0% B5% D1% 80 / [20121112]% 20The% 20smarest% 20transparent% 20pixel.html )

แน่นอนว่า gif นี้สามารถเก็บไว้ในตัวแปรระดับโลกได้ดังนั้นมันจะไม่ทำให้เทมเพลตเสียหาย

<script>
  window.fallbackGif = "..."
</script>

และใช้

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

เป็นต้น

— Jacek Głodek
แหล่งที่มา

0

เพียงใช้ css ธรรมดา

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}

— โอวาอิสบินริซวาน
แหล่งที่มา