แปลจาก: การสร้าง CSS Image Preloader
จีน: การโหลดอิมเมจ Pure CSS ล่วงหน้า
สงวนลิขสิทธิ์ โปรดระบุแหล่งที่มาสำหรับการพิมพ์ซ้ำ ขอขอบคุณ!
มีหลายวิธีในการใช้การโหลดรูปภาพล่วงหน้า โดยทั่วไปจะใช้ Javascript เพื่อให้สิ่งต่างๆ เลื่อนได้ อย่าถูกจำกัดโดยการโหลดล่วงหน้าของ Javascript อีกต่อไป ใช้ CSS และคุณสามารถโหลดภาพล่วงหน้าได้โดยไม่ต้องยุ่งยาก
เหตุใดจึงต้องใช้การโหลดล่วงหน้า
เหตุใดคุณจึงพิจารณาใช้การโหลดล่วงหน้า คุณเคยมีเว็บไซต์ที่ต้องเลื่อนดูการนำทางแล้วเกิดความล่าช้าในการโหลดรูปภาพ...อิอิ การโหลดล่วงหน้าจะช่วยคุณในเรื่องนี้ มันจะโหลดรูปภาพเหล่านั้นเมื่อโหลดหน้าและจัดเก็บไว้ในแคชของเบราว์เซอร์ ด้วยวิธีนี้เมื่อผู้ใช้เลื่อนการนำทางก็จะสวยงามและราบรื่นโดยไม่ชักช้า
รหัสซีเอสเอส
แนวคิดคือการเขียนสไตล์ CSS เพื่อตั้งค่าภาพพื้นหลังจำนวนมากแล้วซ่อนไว้เพื่อไม่ให้เห็นภาพเหล่านั้น ภาพพื้นหลังเหล่านั้นเป็นภาพพื้นหลังที่คุณต้องการโหลดล่วงหน้า
นี่คือตัวอย่าง:
#ตัวโหลดล่วงหน้า {
/* รูปภาพที่คุณต้องการโหลดล่วงหน้า */
ภาพพื้นหลัง: url (image1.jpg);
ภาพพื้นหลัง: url(image2.jpg);
ภาพพื้นหลัง: url (image3.jpg);
ความกว้าง: 0px;
ความสูง: 0px;
จอแสดงผล: อินไลน์;
-
นี่เป็นเพียงวิธีการซ่อนภาพของคุณเพื่อไม่ให้แสดง ฉันยังเคยเห็นผู้คนใช้ค่าตำแหน่งพื้นหลังที่ใหญ่มากเพื่อดันรูปภาพออกมา หรือให้ค่ามาร์จิ้นติดลบ มีหลายวิธีในการซ่อนภาพที่คุณต้องการโหลดล่วงหน้า โดยเลือกภาพที่เหมาะกับคุณที่สุด
สถานการณ์อื่น
มันไม่ได้เกิดขึ้นบ่อยนักที่คุณจะมีภาพขนาดใหญ่ให้ดาวน์โหลด หากคุณปฏิบัติตามแนวทางปกติในการบ่งชี้ว่าภาพกำลังโหลดอยู่ นี่คือ CSS บางส่วนที่จะให้คำแนะนำแก่ผู้ใช้ว่ารูปภาพกำลังโหลด
img { พื้นหลัง: url (loadingHourGlass.gif) ไม่ทำซ้ำ 50% 50%;
ภาพ GIF สามารถทำเป็นภาพเคลื่อนไหวได้ คล้ายกับสิ่งต่างๆ เช่น ลูกบอลชายหาดบน Mac หรือนาฬิกาทรายบนพีซี ใช้ภาพเคลื่อนไหวเพื่อให้ผู้ใช้รู้ว่ามีบางอย่างเกิดขึ้น
สรุปแล้ว
พยายามทำให้ดีที่สุดเมื่อโหลดล่วงหน้าอย่างสมเหตุสมผล แล้วผู้ใช้จะรักคุณในสิ่งนี้ ในความเป็นจริงพวกเขาอาจไม่สังเกตเห็น แต่นั่นเป็นสิ่งที่ดี หากพวกเขาสังเกตเห็นว่าไซต์ของคุณกำลังโหลด ก็อาจจะช้าเกินไป
หมายเหตุพิเศษเกี่ยวกับตัวอย่างที่ 1
ก่อนอื่นขอขอบคุณสำหรับคำถามที่ชาวเน็ตยกขึ้นมาในความคิดเห็น หลังจากแปลบทความนี้แล้ว เมื่อพิจารณาว่ามีการกำหนดแอตทริบิวต์เดียวกันหลายครั้งในกฎ CSS โดยทั่วไปเบราว์เซอร์จะประมวลผลเฉพาะอันสุดท้ายเท่านั้น ฉันตัดสินใจว่าจำเป็นต้อง ทำแบบทดสอบแต่ไม่รู้ว่าเกิดอะไรขึ้น เนื่องจากความร้ายแรงของเรื่องจึงไม่ได้รับการจัดการทันเวลา ซึ่งอาจทำให้เกิดความเข้าใจผิดบางประการได้
จากการทดสอบของฉัน เบราว์เซอร์ส่วนใหญ่โหลดเฉพาะรูปภาพสุดท้าย และ สองรูปภาพแรกจะถูกละเว้น แต่ในเบราว์เซอร์ webkit-core เช่น chrome รูปภาพทั้งสามนี้จะถูกโหลดไว้ล่วงหน้า ตัวอย่างที่ 1 ให้แนวคิดที่ดีในการแก้ไขปัญหา แต่สำหรับการใช้งานการโหลดหลายภาพในรูปแบบ CSS เดียวกัน เราอาจต้องรอจนกว่า แอตทริบิวต์ภาพพื้นหลังหลายรายการของ CSS3 จะได้รับการสนับสนุนโดยเบราว์เซอร์จำนวนมากขึ้น
PS: ให้ฉันอธิบายการสาธิตนี้ บางทีผู้เขียนต้นฉบับอาจไม่ได้คิดมากเกินไปและเพียงต้องการแสดงให้เห็นถึงผลกระทบของการโหลดล่วงหน้า ดังนั้นหน้าสาธิตนี้จึงค่อนข้างง่าย: เขาเพียงแค่ใช้ภาพที่โหลดไว้ล่วงหน้าเป็นพื้นหลังของ a:hover ดังนั้นเมื่อเมาส์เลื่อนผ่าน มันสามารถทำให้ภาพนั้นไม่สั่นไหวได้จริง นั่นคือการใช้งานครั้งที่สองในบทความ...
ต้นฉบับแปล :
http://www.qianduan.net/pure-css-image-preloader.html