ฉันจะสนับสนุนให้เบราว์เซอร์ดาวน์โหลดรูปภาพจากไฟล์ CSS เร็วขึ้นได้อย่างไร

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

CSS ใช้สำหรับการจัดแต่งทรงผมไม่ใช่เนื้อหา เบราว์เซอร์ (ถูกต้อง) ลองและแสดงเนื้อหาก่อนเพิ่มสไตล์ดังนั้นเหตุผลที่รูปภาพในสไตล์ชีทมักจะดาวน์โหลดล่าสุด หากภาพมีความสำคัญต่อเนื้อหาของคุณให้เพิ่มภาพเหล่านั้นผ่าน<IMG>แท็กHTML มาตรฐาน

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

รูปภาพในหน้าจะมีลำดับความสำคัญและเมื่อรูปภาพถูกแคชแล้วรูปภาพเหล่านั้นจะแสดงผลทันทีเมื่อมีการร้องขอหน้าถัดไป

สำหรับเบราว์เซอร์ที่รองรับประเภทข้อมูล URI (ดูhttp://en.wikipedia.org/wiki/Data_Uriเพื่อขอข้อมูล) เพื่อรวมภาพไว้ใน CSS ด้วย

สิ่งนี้มีข้อเสียเล็กน้อยแม้ว่า:

• ข้อมูลจะถูกโหลดซ้ำเมื่อ CSS ไม่ใช่การแคชแยกต่างหากยกเว้นว่า CSS ของคุณจะเปลี่ยนเป็นประจำนี่ไม่ใช่ปัญหามากนัก
• CSS ขาดการสืบทอดและวิธีการดังกล่าวอาจมีเวลา (เสียแบนด์วิดท์) เมื่อคุณต้องรวมกราฟิกเดียวกันหลายครั้งหรือเปลี่ยนคลาสที่ใช้ในเอกสารของคุณ
• รูปภาพถูกเข้ารหัส base64 เมื่อใช้วิธีนี้ซึ่งหมายความว่าพวกเขาใช้แบนด์วิดท์มากขึ้น (แม้ว่าปัญหาแบนด์วิดท์จะมีความสำคัญน้อยกว่ามากหากคุณกำลังส่งข้อมูลที่บีบอัด)
• คุณจะต้องจัดเตรียมสไตล์สำรองสำหรับเบราว์เซอร์ที่ไม่รองรับข้อมูล URIs ซึ่งบางตัวอยู่ไกลจากเรื่องผิดปกติ (เช่น IE6 และ IE7 เป็นต้น)

ณ ตอนนี้ไม่มีวิธีระบุไฟล์ที่จะดาวน์โหลดก่อน FYI, รูปภาพที่ระบุในไฟล์ CSS เป็นภาพพื้นหลังที่ดาวน์โหลดล่าสุดอาจเป็นเพราะเบราว์เซอร์เห็นว่าไม่ใช่เนื้อหาและมีลำดับความสำคัญต่ำกว่าดังนั้นจึงควรหลีกเลี่ยงการใช้รูปภาพเหล่านี้สำหรับภาพสำคัญที่คุณต้องการโหลดอย่างรวดเร็ว

ใช้CSS spriteโดยเฉพาะไอคอน

ทำให้ภาพของคุณเล็กที่สุดเท่าที่จะทำได้ คุณสามารถใช้smush.itเพื่อลบไบต์ที่ไม่จำเป็นออกได้