js实现图片加载

使用Image对象加载图片

通过JavaScript的Image对象可以动态加载图片，适用于需要预加载或动态插入图片的场景。

const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
    console.log('图片加载完成');
    document.body.appendChild(img);
};
img.onerror = function() {
    console.error('图片加载失败');
};

监听图片加载状态

通过addEventListener监听图片的加载和错误事件，适用于需要更灵活事件处理的场景。

const img = document.createElement('img');
img.addEventListener('load', () => {
    console.log('图片加载成功');
});
img.addEventListener('error', () => {
    console.log('图片加载失败');
});
img.src = 'path/to/image.jpg';
document.body.appendChild(img);

批量预加载多张图片

通过数组和Promise实现多张图片的预加载，适用于需要提前缓存资源的场景。

function loadImages(urls) {
    return Promise.all(
        urls.map(url => {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.src = url;
                img.onload = () => resolve(img);
                img.onerror = () => reject(new Error(`加载失败: ${url}`));
            });
        })
    );
}

loadImages(['image1.jpg', 'image2.jpg'])
    .then(images => {
        images.forEach(img => document.body.appendChild(img));
    })
    .catch(error => console.error(error));

懒加载图片（Intersection Observer API）

通过IntersectionObserver实现图片懒加载，适用于长页面中优化性能的场景。

const lazyImages = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
});

lazyImages.forEach(img => observer.observe(img));

图片加载超时处理

通过setTimeout实现图片加载超时控制，适用于网络不稳定的场景。

function loadImageWithTimeout(url, timeout) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        const timer = setTimeout(() => {
            reject(new Error('图片加载超时'));
        }, timeout);

        img.onload = () => {
            clearTimeout(timer);
            resolve(img);
        };
        img.onerror = () => {
            clearTimeout(timer);
            reject(new Error('图片加载失败'));
        };
        img.src = url;
    });
}

loadImageWithTimeout('path/to/image.jpg', 5000)
    .then(img => document.body.appendChild(img))
    .catch(error => console.error(error));

动态修改图片源

通过修改src属性实现图片的动态切换，适用于需要根据条件更新图片的场景。

const img = document.getElementById('myImage');
img.src = 'new-image.jpg';
img.onload = () => console.log('新图片加载完成');