当前位置：首页 > jquery

jquery图片

2026-03-02 09:47:15jquery

jQuery 图片操作

jQuery 提供了多种方法来操作图片，包括加载、显示、隐藏、动画效果等。以下是一些常见的 jQuery 图片操作方法：

动态加载图片
使用 attr() 方法可以动态修改图片的 src 属性，实现图片的加载或切换：

$("#myImage").attr("src", "new-image.jpg");

图片显示与隐藏
通过 show() 和 hide() 方法控制图片的显示状态：

$("#myImage").show(); // 显示图片
$("#myImage").hide(); // 隐藏图片

图片淡入淡出效果
使用 fadeIn() 和 fadeOut() 实现平滑的过渡效果：

$("#myImage").fadeIn(1000); // 1秒内淡入
$("#myImage").fadeOut(1000); // 1秒内淡出

图片尺寸调整
通过 width() 和 height() 方法获取或设置图片的尺寸：

var imgWidth = $("#myImage").width(); // 获取宽度
$("#myImage").height(200); // 设置高度为200px

图片懒加载
结合插件（如 jQuery Lazy）实现图片懒加载，提升页面性能：

$("img.lazy").lazy();

图片预加载
使用 jQuery 预加载多张图片，确保图片在需要时已缓存：

function preloadImages(array) {
    $(array).each(function() {
        $("<img>").attr("src", this);
    });
}
preloadImages(["image1.jpg", "image2.jpg"]);

常见问题解决

图片加载失败处理
通过 error 事件捕获加载失败的图片并替换为默认图：

$("img").on("error", function() {
    $(this).attr("src", "default.jpg");
});

响应式图片调整
监听窗口大小变化，动态调整图片尺寸：

$(window).resize(function() {
    $("#myImage").width($(window).width() * 0.8);
});

插件推荐

Magnific Popup
用于实现灯箱效果的轻量级插件，支持图片、视频等内容。
官网：https://dimsemenov.com/plugins/magnific-popup/
Slick Carousel
灵活的轮播图插件，支持图片滑动展示。
官网：https://kenwheeler.github.io/slick/
Lazy Load XT
高性能的懒加载插件，适用于大量图片的页面。
官网：https://ressio.github.io/lazy-load-xt/