怎么用js做一张张添加图片

在JavaScript中，可以通过DOM操作实现动态添加图片。 操作DOM、创建元素、设置属性 是核心步骤。下面将详细介绍如何通过JavaScript实现动态添加图片，并提供一些实际应用的场景和技巧。

一、创建基本HTML结构

在开始使用JavaScript操作DOM之前，我们需要一个基本的HTML结构。这个结构包含一个容器，用于放置动态添加的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态添加图片</title>
</head>
<body>
    <div id="image-container"></div>
    <button id="add-image-button">添加图片</button>
    <script src="script.js"></script>
</body>
</html>

二、操作DOM，创建图片元素

通过JavaScript，我们可以访问HTML文档中的元素，并进行相应的操作。下面的代码展示了如何在用户点击按钮时，动态添加图片到容器中。

document.getElementById('add-image-button').addEventListener('click', function() {
    const img = document.createElement('img');
    img.src = 'https://via.placeholder.com/150';
    img.alt = 'Placeholder Image';
    img.width = 150;
    img.height = 150;
    document.getElementById('image-container').appendChild(img);
});

三、如何设置图片的属性

在创建图片元素后，我们需要为其设置一些属性，比如src、alt、width和height。这些属性可以通过Element对象的setAttribute方法来设置。

const img = document.createElement('img');
img.setAttribute('src', 'https://via.placeholder.com/150');
img.setAttribute('alt', 'Placeholder Image');
img.setAttribute('width', '150');
img.setAttribute('height', '150');

四、动态加载不同的图片

在实际应用中，我们可能需要动态加载不同的图片。可以通过数组存储图片的URL，然后在点击按钮时，从数组中随机选择一个URL来创建图片。

const imageUrls = [
    'https://via.placeholder.com/150/0000FF',
    'https://via.placeholder.com/150/FF0000',
    'https://via.placeholder.com/150/00FF00'
];
document.getElementById('add-image-button').addEventListener('click', function() {
    const randomIndex = Math.floor(Math.random() * imageUrls.length);
    const img = document.createElement('img');
    img.src = imageUrls[randomIndex];
    img.alt = 'Random Image';
    img.width = 150;
    img.height = 150;
    document.getElementById('image-container').appendChild(img);
});

五、图片加载错误处理

在加载图片时，可能会遇到URL无效的情况。我们可以通过监听图片的error事件来处理这种情况，显示一个备用图片或提示用户。

document.getElementById('add-image-button').addEventListener('click', function() {
    const img = document.createElement('img');
    img.src = 'https://invalid-url.com/150';
    img.alt = 'Placeholder Image';
    img.width = 150;
    img.height = 150;
    img.onerror = function() {
        img.src = 'https://via.placeholder.com/150';
        alert('图片加载失败，显示备用图片');
    };
    document.getElementById('image-container').appendChild(img);
});

六、使用CSS样式美化图片

除了通过JavaScript操作DOM外，我们还可以通过CSS样式美化图片，使其在页面上展示得更美观。

<style>
    #image-container {
        display: flex;
        flex-wrap: wrap;
    }
    #image-container img {
        margin: 10px;
        border: 2px solid #ddd;
        border-radius: 5px;
    }
</style>

七、实现拖拽图片功能

为了提高用户体验，可以添加拖拽图片功能。用户可以通过拖拽图片来重新排列它们的位置。

let dragged;
document.addEventListener('dragstart', function(event) {
    dragged = event.target;
    event.target.style.opacity = .5;
}, false);
document.addEventListener('dragend', function(event) {
    event.target.style.opacity = "";
}, false);
document.addEventListener('dragover', function(event) {
    event.preventDefault();
}, false);
document.addEventListener('dragenter', function(event) {
    if (event.target.tagName === 'IMG') {
        event.target.style.border = "2px dashed #000";
    }
}, false);
document.addEventListener('dragleave', function(event) {
    if (event.target.tagName === 'IMG') {
        event.target.style.border = "";
    }
}, false);
document.addEventListener('drop', function(event) {
    event.preventDefault();
    if (event.target.tagName === 'IMG') {
        event.target.style.border = "";
        if (dragged !== event.target) {
            let container = document.getElementById('image-container');
            container.insertBefore(dragged, event.target.nextSibling);
        }
    }
}, false);

八、实现图片的删除功能

在某些情况下，我们可能需要允许用户删除图片。可以通过为图片添加一个删除按钮来实现这一功能。

document.getElementById('add-image-button').addEventListener('click', function() {
    const imgContainer = document.createElement('div');
    const img = document.createElement('img');
    img.src = 'https://via.placeholder.com/150';
    img.alt = 'Placeholder Image';
    img.width = 150;
    img.height = 150;
    const deleteButton = document.createElement('button');
    deleteButton.textContent = '删除';
    deleteButton.addEventListener('click', function() {
        imgContainer.remove();
    });
    imgContainer.appendChild(img);
    imgContainer.appendChild(deleteButton);
    document.getElementById('image-container').appendChild(imgContainer);
});

九、图片懒加载技术

为了提高页面加载速度，可以使用图片懒加载技术。只有当图片进入视口时才加载图片。

document.getElementById('add-image-button').addEventListener('click', function() {
    const img = document.createElement('img');
    img.dataset.src = 'https://via.placeholder.com/150';
    img.alt = 'Placeholder Image';
    img.width = 150;
    img.height = 150;
    img.classList.add('lazy');
    document.getElementById('image-container').appendChild(img);
    lazyLoad();
});
function lazyLoad() {
    const lazyImages = document.querySelectorAll('img.lazy');
    const config = {
        rootMargin: '50px 0px',
        threshold: 0.01
    };
    const imageObserver = new IntersectionObserver(function(entries, self) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove('lazy');
                self.unobserve(img);
            }
        });
    }, config);
    lazyImages.forEach(image => {
        imageObserver.observe(image);
    });
}

十、总结

通过JavaScript操作DOM，可以轻松实现动态添加图片的功能。创建元素、设置属性 是实现这一功能的核心步骤。此外，结合实际应用场景，我们可以实现多种功能，如拖拽、删除、懒加载等，提高用户体验。希望这篇文章对你有所帮助，让你在实际项目中能够灵活运用这些技巧。