วิธีโหลดภาพล่วงหน้า (Preload Images) ด้วย JavaScript

คุณสามารถโหลดภาพล่วงหน้า (prefetch) ด้วย JavaScript โดยใช้วิธีการต่อไปนี้:

function preloadImage(url) {
  let img = new Image();
  img.src = url;
  return img;
}

ข้อสังเกตสำคัญ: บราวเซอร์ทุกตัวจะปล่อย (garbage collect) อ็อบเจกต์ภาพหลังจากผ่านไปสักครู่ หากคุณไม่ได้นำไปใช้งาน ทำให้การโหลดล่วงหน้ามีประสิทธิภาพลดลง เพื่อป้องกันสิ่งนี้ ให้เก็บอ้างอิง (reference) ไว้ที่อ็อบเจกต์ img ไว้ในตัวแปรที่มีขอบเขตกว้างขึ้นหรือในอาร์เรย์

ตัวอย่างการใช้งานจริง

// เก็บอ้างอิงไว้ในอาร์เรย์เพื่อป้องกัน garbage collection
const preloadedImages = [];

function preloadImages(urls) {
  urls.forEach(url => {
    const img = new Image();
    img.src = url;
    preloadedImages.push(img); // เก็บ reference ไว้
  });
}

// ใช้งาน
preloadImages([
  '/images/hero.jpg',
  '/images/logo.png',
  '/images/background.webp'
]);