当前位置：首页 > jquery

jquery img

2026-04-07 23:10:30jquery

jQuery 操作图片（img）元素

在 jQuery 中，可以通过多种方式操作 <img> 元素，包括修改属性、绑定事件、动态加载图片等。以下是常见的操作方法：

修改图片的 src 属性

$('img').attr('src', 'new-image.jpg');

修改图片的 alt 属性

$('img').attr('alt', 'New description');

获取图片的宽度和高度

var width = $('img').width();
var height = $('img').height();

动态加载图片

jquery img

var newImage = $('<img>').attr('src', 'path/to/image.jpg');
$('body').append(newImage);

图片加载完成事件

$('img').on('load', function() {
    console.log('图片加载完成');
});

图片加载失败事件

$('img').on('error', function() {
    console.log('图片加载失败');
    $(this).attr('src', 'fallback-image.jpg');
});

预加载图片

jquery img

function preloadImage(url) {
    $('<img>').attr('src', url);
}

图片懒加载（延迟加载）

$(window).on('scroll', function() {
    $('img.lazy').each(function() {
        if ($(this).offset().top < $(window).height() + $(window).scrollTop()) {
            $(this).attr('src', $(this).data('src'));
            $(this).removeClass('lazy');
        }
    });
});

图片淡入效果

$('img').hide().fadeIn(1000);

图片点击事件

$('img').on('click', function() {
    alert('图片被点击了');
});

动态修改多个图片的 src

$('img').each(function() {
    var newSrc = $(this).attr('src').replace('old', 'new');
    $(this).attr('src', newSrc);
});

注意事项

确保在 DOM 加载完成后执行 jQuery 代码，可以使用 $(document).ready() 或简写的 $(function() { ... })。
对于动态添加的图片，可能需要使用事件委托来绑定事件，例如 $(document).on('click', 'img', function() { ... })。
图片加载事件（load 和 error）对于缓存图片可能不会触发，需要特殊处理。