HTML มีแอตทริบิวต์ที่เรียกว่า preload ที่ให้คุณให้ คำใบ้กับเบราว์เซอร์ได้ เกี่ยวกับวิธีการและที่สำคัญกว่านั้น เมื่อ เพื่อโหลดเนื้อหาเมื่อโหลดหน้า
preload แอตทริบิวต์สามารถใช้ได้กับองค์ประกอบ HTML หลายรายการ ตัวอย่างเช่น คุณสามารถเพิ่มลงใน <link> องค์ประกอบเพื่อให้เบราว์เซอร์เริ่มต้นการดึงข้อมูล CSS สไตล์ชีตของคุณล่วงหน้า
อย่า ใช้ preload แอตทริบิวต์ใน <link> . ของคุณ แบบนี้ (ตามที่บางเว็บแนะนำ):
<link rel="preload" rel=stylesheet href="/css/styles.css" as="style">เนื่องจากโค้ดด้านบนโหลดเฉพาะสไตล์ชีตของคุณ จึงไม่ ใช้ มัน.
แทนที่จะโหลดล่วงหน้าและใช้สไตล์ชีตของคุณ (ทันทีที่โหลดไว้ล่วงหน้า) คุณสามารถใช้อินไลน์ JS onload ตัวจัดการเหตุการณ์บน <link> . ของคุณ องค์ประกอบ:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
JS onload ตัวจัดการเหตุการณ์จะเปลี่ยน rel="preload" . ขององค์ประกอบลิงก์ แอตทริบิวต์ rel="stylesheet" ทันทีที่โหลดเสร็จ
ด้วยการกำหนดค่าข้างต้น เบราว์เซอร์ที่รองรับ preload จะเริ่มดาวน์โหลดสไตล์ชีต CSS เร็วกว่าถ้าคุณไม่ได้ใช้แอตทริบิวต์
รองรับเบราว์เซอร์
preload แอตทริบิวต์ยังไม่ได้รับการสนับสนุนใน Firefox (ผิดปกติ) แต่ใช้งานได้ในเบราว์เซอร์สมัยใหม่อื่น ๆ ทั้งหมด คุณยังสามารถใช้ preload แต่จะไม่ดึงข้อมูล CSS ล่วงหน้าใน Firefox (จะโหลดได้ตามปกติ)
