JS 分页加载 Image 完美销毁指南：杜绝内存泄漏！

在 JavaScript 中实现图片的分页加载并确保销毁时不发生内存泄漏，可以按以下步骤操作。 思路 1. 加载图片：当进行分页加载时，动态创建 `img` 元素并添加到 DOM 中。 2. 销毁图片：在不需要这些图片时，将 `img` 元素从 DOM 中移除，并清除其事件监听器和引用。 代码示例 ```javascript // 模拟分页加载图片 function loadImages(page, container) { // 模拟图片 URL 数组 const imageUrls = [ 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg' ]; // 计算当前页要加载的图片 const startIndex = (page - 1) * 3; const endIndex = startIndex + 3; const currentImages = imageUrls.slice(startIndex, endIndex); // 为每一个图片创建 img 元素并添加到容器中 currentImages.forEach(url => { const img = new Image(); img.src = url; img.addEventListener('load', () => { console.log(`Image loaded: ${url}`); }); container.appendChild(img); }); } // 销毁图片 function destroyImages(container) { // 获取容器内所有的 img 元素 const images = container.querySelectorAll('img'); images.forEach(img => { // 移除事件监听器 img.removeEventListener('load', () => {}); // 移除 img 元素 img.parentNode.removeChild(img); // 清除 img 对象的引用 img.src = ''; img = null; }); } // 使用示例 const container = document.getElementById('image-container'); // 加载第一页图片 loadImages(1, container); // 销毁图片 destroyImages(container); ``` 代码解释 1. loadImages 函数：模拟分页加载图片，根据页码计算要加载的图片，创建 `img` 元素并添加到指定容器中。 2. destroyImages 函数：获取容器内所有的 `img` 元素，移除事件监听器，从 DOM 中移除 `img` 元素，清除 `img` 对象的引用。 需要小心的地方 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 确保移除所有的事件监听器，否则可能会导致内存泄漏。 2. 清除 `img` 对象的 `src` 属性，避免浏览器继续缓存图片。 3. 在移除 `img` 元素后，将其引用设置为 `null`，帮助垃圾回收机制回收内存。 ######[AI写代码神器 | 621点数解答 | 2025-08-13 14:00:14]