<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 判断图片是否存在</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.success {
color: green;
}
.error {
color: red;
}
#checkBtn {
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#checkBtn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>jQuery 判断图片是否存在</h1>
<p>这个示例演示了如何使用 jQuery 检查图片是否存在。</p>
<div>
<label for="imageUrl">输入图片 URL:</label>
<input type="text" id="imageUrl" style="width: 300px;"
value="/example-image.jpg" />
<button id="checkBtn">检查图片</button>
</div>
<div id="result" class="result" style="display: none;">
<h3>检查结果:</h3>
<p id="status"></p>
<div id="imageContainer"></div>
</div>
<script>
$(document).ready(function() {
$('#checkBtn').click(function() {
var imageUrl = $('#imageUrl').val().trim();
if (!imageUrl) {
alert('请输入图片 URL');
return;
}
// 显示加载状态
$('#result').show();
$('#status').html('正在检查图片...').removeClass('success error');
$('#imageContainer').empty();
// 创建 Image 对象来检查图片是否存在
var img = new Image();
img.onload = function() {
// 图片加载成功
$('#status').html('图片存在！').addClass('success');
$('#imageContainer').html('<img src="' + imageUrl + '" style="max-width: 100%;" />');
};
img.onerror = function() {
// 图片加载失败
$('#status').html('图片不存在或无法加载').addClass('error');
};
// 设置图片源
img.src = imageUrl;
// 如果图片已经在缓存中，可能不会触发 onload 事件
if (img.complete) {
if (img.naturalWidth === 0) {
img.onerror();
} else {
img.onload();
}
}
});
$('#checkBtn').trigger('click');
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
