1. การแนะนำพื้นหลัง
ในแอปพลิเคชันอัลบั้มภาพถ่ายออนไลน์ผู้ใช้จำเป็นต้องดูรูปภาพที่ง่ายที่สุด เมื่อเครือข่ายช้าลงเวลารอดูภาพถ่ายค่อนข้างยาวและประสบการณ์ผู้ใช้จะแย่มาก
2. สถานการณ์ปัจจุบัน
มีสองวิธีหลักในการโหลดรูปภาพ:
(1) วิธีดั้งเดิมที่สุดในการโหลดและแสดงรูปภาพโดยตรงในหน้า HTML ด้วยแท็ก IMG วิธีนี้จะมีกระบวนการรอที่ว่างเปล่าเมื่อความเร็วเครือข่ายช้าหรือภาพถ่ายที่จะแสดงมีขนาดค่อนข้างใหญ่และประสบการณ์ของผู้ใช้จะไม่ดี
(2) ก่อนอื่นให้ใช้แท็ก IMG เพื่อโหลดรูปขนาดย่อของรูปภาพเพื่อแสดงรูปภาพในหน้า HTML จากนั้นใช้ JavaScript เพื่อโหลดภาพต้นฉบับของภาพถ่ายที่ซ่อนอยู่และรอจนกว่าภาพขนาดใหญ่ของภาพถ่ายจะถูกโหลดก่อนที่จะแสดงภาพต้นฉบับไปยังหน้า ต่อไปนี้เป็นผังงาน:
3. โซลูชันของเรา
วิธีการเพิ่มประสิทธิภาพบางอย่างเมื่อเร็ว ๆ นี้ที่ทำโดยอัลบั้ม QQ Photo ได้แก้ไขข้อบกพร่องของสองวิธีในการอุทธรณ์และตอบสนองความต้องการของผู้ใช้ในการดูรูปภาพ: ดูสถานการณ์ทั่วไปของภาพถ่ายโดยเร็วที่สุดและดูภาพต้นฉบับที่ชัดเจนที่สุดเท่าที่จะทำได้ วิธีนี้ใช้รูปขนาดย่อและรูปภาพต้นฉบับเพื่อโหลดและซ้อนทับแสดงพร้อมกัน ขั้นแรกให้โหลดภาพขนาดย่อและขยายจอแสดงผลและภาพขนาดใหญ่จะถูกทับบนรูปขนาดย่อและโหลดพร้อมกัน รูปขนาดย่อมีขนาดเล็กมากและมักจะช่วยให้ผู้ใช้เห็นภาพเบลอได้อย่างรวดเร็ว ในระหว่างการโหลดภาพขนาดใหญ่รูปขนาดย่อจะค่อยๆครอบคลุมจากบนลงล่างเพื่อให้ผู้ใช้สามารถเห็นภาพขนาดใหญ่ในระหว่างกระบวนการโหลด
(1) ตัวอย่างไดอะแกรม
ดังที่แสดงข้างต้นขั้นตอนการประมวลผลของวิธีนี้คือ:
1). รับ URL ของภาพขนาดย่อและภาพต้นฉบับและรับความยาวและความกว้างของภาพถ่าย
2). โหลดและแสดงภาพขนาดย่อของภาพถ่ายและยืดรูปขนาดย่อตามความยาวและความกว้างของภาพยนตร์ ในเวลานี้ผู้ใช้เห็นเอฟเฟกต์เบลอ
3). โหลดและแสดงภาพถ่ายต้นฉบับซ้อนทับภาพต้นฉบับบนรูปขนาดย่อเพื่อแสดง ภาพต้นฉบับจะแสดงมากเท่าที่โหลด หากไม่ได้โหลดมันจะยังคงแสดงภาพขนาดย่อ เขียนทับรูปขนาดย่ออย่างค่อยเป็นค่อยไป ในระหว่างกระบวนการโหลดของภาพต้นฉบับผู้ใช้จะเห็นเอฟเฟกต์การไล่ระดับสีของภาพถ่ายจากเบลอเพื่อล้าง
4). หลังจากโหลดภาพต้นฉบับภาพต้นฉบับได้เขียนภาพย่อทั้งหมดและผู้ใช้จะเห็นภาพต้นฉบับจริง ในเวลานี้คุณสามารถซ่อนภาพขนาดย่อเพื่อป้องกันภาพขนาดย่อจากการรบกวนการแสดงภาพที่มีเอฟเฟกต์โปร่งใสเช่น PNG หรือ GIF
(2) รหัสตัวอย่าง
<!-ตั้งค่าขนาดของภาพถ่าย-> <div> <!-ภาพขนาดเล็กแสดงขนาดใหญ่-> <img src = "small_url"/> <!-ภาพต้นฉบับถูกซ้อนทับบนภาพขนาดเล็ก-> <img src = "big_url"/> </div>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ JavaScript คุณสามารถตรวจสอบ: "คำแนะนำอ้างอิง JavaScript" และ "คู่มือสไตล์รหัส JavaScript" ฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น