图片jquery

使用 jQuery 处理图片

jQuery 提供多种方法操作图片元素，包括加载、显示隐藏、动态修改属性等。以下是一些常见场景的实现方式。

动态修改图片源

通过 attr() 方法修改 <img> 的 src 属性：

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

图片预加载

使用 Image 对象预加载图片，避免显示延迟：

var img = new Image();
img.src = "large-image.jpg";
$(img).on("load", function() {
  $("#container").append(img);
});

图片懒加载

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

$(window).on("scroll", function() {
  $("img[data-src]").each(function() {
    if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
      $(this).attr("src", $(this).data("src")).removeAttr("data-src");
    }
  });
});

图片淡入效果

使用 fadeIn() 实现渐变显示：

$("#hiddenImage").fadeIn(1000);

响应式图片处理

根据窗口大小调整图片显示：

$(window).on("resize", function() {
  if ($(window).width() < 768) {
    $(".responsive-img").attr("src", "mobile-version.jpg");
  } else {
    $(".responsive-img").attr("src", "desktop-version.jpg");
  }
});

图片点击放大

结合 CSS 实现简易灯箱效果：

$(".thumbnail").on("click", function() {
  $("#lightbox").html($("<img>").attr("src", $(this).attr("src"))).fadeIn();
});
$("#lightbox").on("click", function() {
  $(this).fadeOut();
});

注意事项

• 图片操作前需确保 DOM 已加载完成，建议将代码包裹在 $(document).ready() 中
• 动态修改大量图片时注意性能优化，可使用事件委托或节流技术
• 现代浏览器已原生支持懒加载（loading="lazy"），优先考虑原生方案