如何加载js图片
2020-12-17 21:58:07
在HTML中通过JavaScript动态加载图片的核心步骤包括创建JS文件定义加载函数、在HTML中引入JS并调用函数，最终将图片插入DOM。以下是具体实现方法及优化建议：
一、基础实现步骤创建JS文件新建image-loader.js文件，用于封装图片加载逻辑。
定义加载函数在JS文件中编写函数，接收图片URL作为参数，创建Image对象并设置src属性：
function loadImg(url) { const img = new Image(); img.src = url; return img; // 返回图片对象供后续操作}HTML中引入JS在<head>或<body>底部通过<script>标签引入JS文件：
<head> <script src="image-loader.js"></script></head>触发加载并插入DOM通过事件监听（如DOMContentLoaded或window.onload）调用函数，并将图片插入指定容器：
document.addEventListener('DOMContentLoaded', () => { const img = loadImg('image.jpg'); img.onload = () => { document.getElementById('my-div').appendChild(img); };});
HTML文件（index.html）
<!DOCTYPE html><html><head> <title>JS加载图片示例</title> <script src="image-loader.js"></script></head><body> <div id="image-container"></div> <script> // 直接在HTML中调用（也可放在外部JS中） document.addEventListener('DOMContentLoaded', () => { loadAndDisplayImg('JS文件（image-loader.js）
function loadAndDisplayImg(url) { const img = new Image(); img.src = url; img.alt = "动态加载的图片"; // 添加无障碍属性 img.onload = function() { const container = document.getElementById('image-container'); container.appendChild(img); console.log("图片加载完成"); }; img.onerror = function() { console.error("图片加载失败"); };}三、关键优化点错误处理添加onerror事件监听，避免因图片URL无效导致页面报错：
img.onerror = function() { console.error('图片加载失败:', url); // 可替换为默认图片或显示错误提示};异步加载控制使用Promise或async/await管理多个图片加载：
function loadImgAsync(url) { return new Promise((resolve, reject) => { const img = new Image(); img.src = url; img.onload = () => resolve(img); img.onerror = () => reject(new Error('加载失败')); });}// 调用示例async function loadMultipleImages() { try { const img1 = await loadImgAsync('image1.jpg'); const img2 = await loadImgAsync('image2.jpg'); document.body.appendChild(img1); document.body.appendChild(img2); } catch (error) { console.error(error); }}性能优化
预加载：提前创建Image对象但不插入DOM，减少用户等待时间。
懒加载：仅当图片进入视口时加载，适合长页面：function lazyLoad(imgElement, url) { const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { imgElement.src = url; observer.unobserve(imgElement); } }); observer.observe(imgElement);}
图片未显示
检查URL是否正确（跨域需服务器配置CORS）。
确保DOM容器（如my-div）已存在。
验证onload是否在src赋值后设置。
加载顺序问题若需按顺序加载多张图片，避免使用嵌套的onload回调，改用Promise.all：
Promise.all([ loadImgAsync('image1.jpg'), loadImgAsync('image2.jpg')]).then(images => { images.forEach(img => document.body.appendChild(img));});内存泄漏动态创建的图片若不再需要，应手动移除DOM并清除事件监听器：
function removeImg(imgElement) { imgElement.onload = null; // 清除事件监听 imgElement.remove(); // 从DOM移除}
通过以上方法，可实现高效、可控的JS图片加载，适用于动态内容展示、图片画廊等场景。
热门标签
