js实现src管理
实现 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 属性实现懒加载：
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() 语法实现动态模块加载：
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 资源管理策略。注意在实际项目中考虑加载顺序、依赖管理和性能优化等因素。
