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

// 使用示例
const imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
imageUrls.forEach(url => preloadImage(url));

// AJAX请求成功后预加载返回内容中的图片
fetch('/api/get-content')
  .then(response => response.json())
  .then(data => {
    // 解析返回的HTML内容中的图片
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = data.htmlContent;
    const images = tempDiv.querySelectorAll('img');
    
    // 预加载所有图片
    Array.from(images).forEach(img => {
      const src = img.getAttribute('src') || img.getAttribute('data-src');
      if (src) preloadImage(src);
    });
    
    // 将内容插入DOM
    document.getElementById('content').innerHTML = data.htmlContent;
  });

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.getAttribute('data-src');
      if (src) {
        img.src = src;
        observer.unobserve(img);
      }
    }
  });
}, {rootMargin: '200px 0px'}); // 提前200px开始加载

// 预加载视口附近200px内的图片
document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

// 高优先级图片立即加载
const highPriorityImages = ['hero.jpg', 'logo.png'];
highPriorityImages.forEach(url => preloadImage(url));

// 低优先级图片延迟加载
setTimeout(() => {
  const lowPriorityImages = ['banner.jpg', 'ad.png'];
  lowPriorityImages.forEach(url => preloadImage(url));
}, 3000);

function preloadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Failed to load ${url}`));
    img.src = url;
  });
}

// 使用
preloadImage('important.jpg')
  .catch(error => console.error(error));