ใช้ JavaScript แสดงรูปสำรองหากไม่สามารถโหลดรูปหลักขึ้นมาแสดงได้

วันนี้ผลขอนำเสนอ ตัวอย่างสุดแสนจะง่ายมาก แต่มีประโยชน์มหาศาล ซึ่งตรงกับคำภาษาฝรั่งที่ว่า  Work Less to Get More Done  ทำน้อยแต่ได้มาก ซึ่งเป็น Concept ที่ผมตั้งใจจะทำใน Website นี้ครับ  เอากลับมาเข้าเรื่องกันก่อนครับ สำหรับใครก็ตามที่เคยได้ทำการพัฒนา Website คงเคยเจอก็กับรูป icon Load image Errorแบบนี้ในยามที่ Browser ไม่สามารถโหลดรูปภาพขึ้นมาแสดงได้ซึ่งอาจจะเกิดจากปัญหา Network การติดปัญหา Permission หรือ ปัญหาของการโหลด Cache ไม่ขึ้นหรือปัญหาอื่นๆ อีก 108 ให้ลองดูตามตารางด้านล่าง

icon ของแต่ละ Browser เมื่อเกิดปัญหาการแสดงรูปไม่ขึ้น
Browser icon เมื่อไม่สามารถแสดงภาพได้
Google Chrome Load image Error
Firefox  – (ไม่แสดงอะไรเลย)
Internet Explorer Load image Error
Opera Load image Error

ซึ่งแต่ละ Browser ก็มีวิธีการจัดการที่ไม่เหมือนกัน ซึ่งหากเรายอมให้แต่ละ Browser แสดงรูป icon บ้างไม่แสดงบ้างก็จะทำให้ Website ของเราให้ประสบณ์การที่ไม่ดีต่อ User  ผมเลยนำเรื่องนี้ขึ้นมาเขียนเพื่อแก้ปัญหาดังกล่าว โดยแนวทางการแก้ไขก็ใช้ Event onerror ของ Javascript เข้ามาช่วย แต่อาจจะทำได้ 2 concept  คือ

1 กำหนดรูป default ขึ้นมาหนึ่งรูปแล้ว Onerror ก็ชี้ไปที่นั้น ดัง Codeด้านล่าง (แต่ต้องมันใจว่ามีรูปอยู่จริงๆ)

 <img src="PicTureError.png" onerror="this.src='defaultImage.png'">

 

2 สร้าง Mirror folder เก็บไฟล์สำสองไว้อีกชุดนึงในกรณีที่ไฟล์ชุดแรกมีปัญหา script จะโหลดไฟล์ชุดที่สองทันที

 <img src="realjavascriptthai.jpg" onerror="this.src='backupjavascriptthai.png'">

เท่านี้เราก็มันใจได้เพิ่มอีกในระดับหนึ่งว่า Site ของเราจะสามารถโหลดภาพมาแสดงในหน้า Website ของเราได้อย่างครบถ้วน

สำหรับบทความเล็กๆนี้หวังว่าคงเป็นประโยชน์กับผู้อ่านบ้างนะครับ ขอบคุณครับ ^_^

Leave a Reply