在网页设计中，图片的加载是常见的功能之一。然而，由于网络不稳定或者图片路径错误等原因，图片加载失败的情况时有发生。jQuery 作为一款强大的 JavaScript 库，提供了多种方法来应对图片加载失败的情况。以下是五种技巧，帮助你轻松设置默认图片，确保用户在图片加载失败时也能获得良好的用户体验。
技巧一：使用
error
事件处理图片加载失败
jQuery 的
error
事件允许你在图片加载失败时执行一些代码。以下是一个示例代码：
在这段代码中，如果图片
image.jpg
加载失败，浏览器会自动尝试加载
default.jpg
作为默认图片。
技巧二：利用
.on(‘error’, function(){…})
方法
你也可以在 jQuery 中使用
.on(‘error’, function(){…})
方法来处理图片加载失败的情况：
$(‘img’).on(‘error’, function(){
$(this).attr(‘src’, ‘default.jpg’);
});
这段代码将会监听所有
元素的
error
事件，并在发生错误时将图片的
src
属性设置为默认图片。
技巧三：在HTML中使用
data-*
属性
为了避免在 JavaScript 中直接修改
src
属性，你可以在 HTML 中使用
data-*
属性来存储默认图片的路径。以下是一个示例：
然后在 jQuery 中，你可以使用以下代码来获取默认图片路径：
$(‘img[data-default]’).on(‘error’, function(){
$(this).attr(‘src’, $(this).data(‘default’));
});
技巧四：利用
.attr(‘src’, ‘default.jpg’)
直接修改
如果你不想使用事件监听器，可以直接在 jQuery 中使用
.attr(‘src’, ‘default.jpg’)
方法来修改图片的
src
属性。以下是一个示例：
$(‘img’).each(function(){
if(!$(this).prop(‘complete’)){
$(this).on(‘error’, function(){
$(this).attr(‘src’, ‘default.jpg’);
});
}
});
这段代码将会遍历所有
元素，并为未完成的图片设置一个错误处理函数。
技巧五：结合CSS样式隐藏错误图片
在某些情况下，你可能想要在图片加载失败时显示一个替代的 CSS 样式。以下是一个示例：
这段代码将在图片加载失败时隐藏
元素。
通过以上五种技巧，你可以轻松地使用 jQuery 设置默认图片，并在图片加载失败时提供更好的用户体验。希望这些方法能帮助你解决图片加载问题，让你的网页更加完善。