当前位置：首页 > JavaScript

js实现src管理

2026-04-04 13:21:27JavaScript

实现 JavaScript 的 SRC 管理

在 JavaScript 中，动态管理 src 属性通常用于加载外部资源（如脚本、图片、样式等）。以下是几种常见场景的实现方法：

动态加载 JavaScript 文件

通过创建 script 标签并设置 src 属性，可以实现按需加载脚本：

const loadScript = (url) => {
  const script = document.createElement('script');
  script.src = url;
  script.async = true;
  document.body.appendChild(script);
};
loadScript('https://example.com/example.js');

图片懒加载

动态修改图片的 src 属性实现懒加载：

js实现src管理

const lazyLoadImages = () => {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach(img => {
    if (img.getBoundingClientRect().top < window.innerHeight) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
};
window.addEventListener('scroll', lazyLoadImages);

资源预加载

使用 link 标签预加载关键资源：

const preloadResource = (url, type = 'script') => {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.href = url;
  link.as = type; // script/style/font/image等
  document.head.appendChild(link);
};
preloadResource('critical.css', 'style');

模块化动态导入

ES6 的 import() 语法实现动态模块加载：

js实现src管理

const loadModule = async (modulePath) => {
  try {
    const module = await import(modulePath);
    module.init(); // 假设模块有init方法
  } catch (error) {
    console.error('模块加载失败:', error);
  }
};
loadModule('./dynamicModule.js');

缓存管理

为 src 添加时间戳避免缓存：

const loadWithCacheBust = (url) => {
  const timestamp = new Date().getTime();
  return `${url}?t=${timestamp}`;
};
imageElement.src = loadWithCacheBust('image.jpg');

错误处理

为动态加载的资源添加错误处理：

const loadScriptWithFallback = (primaryUrl, fallbackUrl) => {
  const script = document.createElement('script');
  script.src = primaryUrl;
  script.onerror = () => {
    script.src = fallbackUrl;
  };
  document.head.appendChild(script);
};

这些方法可以根据具体需求组合使用，实现灵活的 src 资源管理策略。注意在实际项目中考虑加载顺序、依赖管理和性能优化等因素。