当前位置：首页 > jquery

jquery img

2026-01-15 15:43:13jquery

jQuery 操作图片（img）元素的方法

jQuery 提供了多种方法来操作和修改 HTML 中的 <img> 元素。以下是常见的几种用法：

修改图片的 `src` 属性

使用 .attr() 方法可以修改图片的 src 属性：

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

获取图片的 `src` 属性

同样使用 .attr() 方法可以获取当前图片的 src 值：

var imgSrc = $('img').attr('src');
console.log(imgSrc);

预加载图片

使用 Image 对象预加载图片，确保图片加载完成后再显示：

var img = new Image();
img.onload = function() {
    $('img').attr('src', img.src);
};
img.src = 'preload-image.jpg';

动态创建图片元素

使用 jQuery 动态创建并插入 <img> 元素：

var newImg = $('<img>', {
    src: 'dynamic-image.jpg',
    alt: 'Dynamic Image',
    class: 'img-class'
});
$('body').append(newImg);

图片加载事件监听

监听图片的加载完成或加载失败事件：

$('img').on('load', function() {
    console.log('Image loaded successfully');
}).on('error', function() {
    console.log('Image failed to load');
});

图片懒加载

结合 data-src 属性和滚动事件实现懒加载：

<img data-src="lazy-image.jpg" class="lazy">

$(window).on('scroll', function() {
    $('.lazy').each(function() {
        if ($(this).isInViewport()) {
            $(this).attr('src', $(this).data('src'));
            $(this).removeClass('lazy');
        }
    });
});

图片尺寸操作

获取或设置图片的宽度和高度：

// 获取宽度
var imgWidth = $('img').width();

// 设置高度
$('img').height(200);

图片淡入淡出效果

使用 jQuery 动画方法实现图片的淡入淡出：

$('img').fadeOut(500, function() {
    $(this).attr('src', 'new-image.jpg').fadeIn(500);
});

图片轮播实现

简单的图片轮播示例：

var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
var current = 0;

function rotateImage() {
    current = (current + 1) % images.length;
    $('.slideshow img').fadeOut(500, function() {
        $(this).attr('src', images[current]).fadeIn(500);
    });
}

setInterval(rotateImage, 3000);

图片点击放大

实现点击图片放大显示的效果：

$('img.thumbnail').click(function() {
    var largeSrc = $(this).data('large');
    $('<div class="lightbox"><img src="' + largeSrc + '"></div>').appendTo('body').click(function() {
        $(this).remove();
    });
});

这些方法涵盖了 jQuery 操作图片元素的常见需求，包括属性修改、事件处理、动态创建和动画效果等。

jquery img