当前位置：首页 > JavaScript

js实现图片加载

2026-04-03 22:27:51JavaScript

使用Image对象加载图片

通过JavaScript的Image对象可以动态加载图片。创建一个新的Image实例，设置src属性后，监听onload和onerror事件处理加载成功或失败的情况。

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

通过fetch API加载图片

使用fetch获取图片资源，通过blob()方法处理响应数据，再转换为ObjectURL用于显示。

fetch('path/to/image.jpg')
    .then(response => {
        if (!response.ok) throw new Error('加载失败');
        return response.blob();
    })
    .then(blob => {
        const img = new Image();
        img.src = URL.createObjectURL(blob);
        document.body.appendChild(img);
    })
    .catch(error => console.error(error));

图片懒加载实现

结合IntersectionObserver API实现图片懒加载，当图片进入视口时再加载。

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));

预加载多张图片

使用Promise.all批量预加载多张图片，确保所有图片加载完成后再执行后续操作。

const preloadImages = (urls) => {
    return Promise.all(
        urls.map(url => {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.src = url;
                img.onload = resolve;
                img.onerror = reject;
            });
        })
    );
};
preloadImages(['image1.jpg', 'image2.jpg'])
    .then(() => console.log('所有图片加载完成'))
    .catch(error => console.error('部分图片加载失败', error));

显示加载占位图

在图片加载过程中显示占位图或加载动画，提升用户体验。

const img = new Image();
img.src = 'path/to/image.jpg';
img.loading = 'lazy'; // 原生懒加载支持
img.alt = '描述文本';
img.style.backgroundColor = '#eee'; // 占位背景色
document.body.appendChild(img);

响应式图片加载

根据屏幕分辨率或设备类型动态加载不同尺寸的图片。

js实现图片加载

const loadResponsiveImage = () => {
    const img = new Image();
    const isRetina = window.devicePixelRatio > 1;
    img.src = isRetina ? 'image@2x.jpg' : 'image.jpg';
    document.body.appendChild(img);
};
window.addEventListener('resize', loadResponsiveImage);
loadResponsiveImage();