如何基于浏览器窗口resize事件条件加载/卸载.js文件？附示例

我来给你拆解具体的实现思路和可落地的代码示例：

核心逻辑说明 #

我们需要监听浏览器的resize事件，在每次窗口尺寸变化时判断预设的条件（比如宽度阈值），然后执行对应的加载/卸载操作：

• 当条件满足时：加载目标JS文件（需做加载状态判断，避免重复加载）
• 当条件不满足时：移除已加载的脚本，并清理相关的全局变量或事件绑定

使用场景示例：窗口宽度>500px时加载图片缩放功能 #

下面用head.js（轻量脚本加载库）来实现这个需求：

<!-- 引入head.js库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.js"></script>

<script>
// 标记脚本是否已加载
let isZoomScriptLoaded = false;

// 定义判断并执行加载/卸载的函数
function handleResize() {
  const windowWidth = window.innerWidth;
  
  if (windowWidth > 500 && !isZoomScriptLoaded) {
    // 条件满足且未加载时，加载缩放脚本
    head.ready(document, function() {
      head.load('https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.min.js', function() {
        // 脚本加载完成后的初始化逻辑
        new Zooming().listen('.zoomable-image');
        isZoomScriptLoaded = true;
      });
    });
  } else if (windowWidth <= 500 && isZoomScriptLoaded) {
    // 条件不满足且已加载时，执行卸载操作
    // 1. 移除DOM中的脚本元素
    const scriptElements = document.querySelectorAll('script[src*="zooming"]');
    scriptElements.forEach(script => script.remove());
    
    // 2. 清理全局变量和事件绑定（根据实际脚本API调整）
    if (window.Zooming) {
      // 若Zooming实例有销毁方法可在此调用，示例：
      // zoomInstance.destroy();
      delete window.Zooming;
    }
    
    isZoomScriptLoaded = false;
  }
}

// 初始化时先执行一次判断
handleResize();

// 监听resize事件，添加防抖避免频繁触发
let resizeTimeout;
window.addEventListener('resize', function() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(handleResize, 200);
});
</script>

原生JS实现方案（不依赖第三方库） #

如果不想用head.js，也可以用原生JS动态创建/移除脚本元素：

let isZoomScriptLoaded = false;
let zoomScriptElement = null;

function handleResize() {
  const windowWidth = window.innerWidth;
  
  if (windowWidth > 500 && !isZoomScriptLoaded) {
    // 创建脚本元素
    zoomScriptElement = document.createElement('script');
    zoomScriptElement.src = 'https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.min.js';
    zoomScriptElement.onload = function() {
      new Zooming().listen('.zoomable-image');
      isZoomScriptLoaded = true;
    };
    document.head.appendChild(zoomScriptElement);
  } else if (windowWidth <= 500 && isZoomScriptLoaded) {
    // 移除脚本元素
    if (zoomScriptElement) {
      zoomScriptElement.remove();
      zoomScriptElement = null;
    }
    
    // 清理全局资源
    if (window.Zooming) {
      delete window.Zooming;
    }
    
    isZoomScriptLoaded = false;
  }
}

// 初始化+防抖监听
handleResize();
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(handleResize, 200);
});

关键注意事项 #

• 防抖处理：resize事件会频繁触发，一定要加防抖（比如200ms延迟），避免频繁加载/卸载脚本导致性能问题
• 重复加载判断：用变量标记脚本是否已加载，避免同一脚本被多次加载
• 卸载完整性：除了移除DOM中的脚本元素，还要清理脚本创建的全局变量、事件绑定、实例等，避免内存泄漏
• 兼容性：确保目标浏览器支持window.innerWidth和动态脚本操作的API

内容的提问来源于stack exchange，提问作者user3703618