图片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"），优先考虑原生方案
