js实现load

使用原生 JavaScript 实现 load 功能

通过 window.onload 或 DOMContentLoaded 事件监听页面加载完成

window.onload = function() {
  // 页面所有资源（图片、脚本等）加载完成后执行
  console.log('Page fully loaded');
};

document.addEventListener('DOMContentLoaded', function() {
  // DOM 解析完成后立即执行，无需等待样式表/图片加载
  console.log('DOM fully parsed');
});

动态加载脚本资源

使用 document.createElement 方法创建 script 标签实现动态加载

function loadScript(url, callback) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  script.onload = function() {
    if (callback) callback();
  };

  document.head.appendChild(script);
}

// 使用示例
loadScript('https://example.com/script.js', function() {
  console.log('Script loaded');
});

图片预加载实现

创建 Image 对象实现图片预加载

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

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

// 使用示例
preloadImage('https://example.com/image.jpg')
  .then(img => {
    document.body.appendChild(img);
  })
  .catch(console.error);

使用 Fetch API 加载数据

通过现代 Fetch API 实现异步数据加载

function loadData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error('Network response was not ok');
      return response.json();
    });
}

// 使用示例
loadData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

懒加载实现方案

Intersection Observer API 实现图片懒加载

function lazyLoadImages() {
  const lazyImages = document.querySelectorAll('img[data-src]');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach(img => observer.observe(img));
}

// 初始化懒加载
document.addEventListener('DOMContentLoaded', lazyLoadImages);