如何隐藏未加载的图片(<img>标签)？
隐藏未加载的图片可以通过多种方法实现，以下是几种常见的方法：
方法一：使用CSS
你可以使用CSS来隐藏未加载的图片。一个常见的方法是使用伪类:empty和:not(:empty)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Unloaded Images</title>
<style>
img {
width: 200px;
height: 200px;
background-color: #f0f0f0; /* 设置一个占位背景色 */
}
img:not([src]):not([srcset]) {
display: none; /* 隐藏没有src属性的图片 */
}
</style>
</head>
<body>
<img data-src="image.jpg" alt="Example Image">
<script>
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
img.src = img.dataset.src;
});
});
</script>
</body>
</html>方法二：使用JavaScript
你可以使用JavaScript来动态设置图片的src属性，并在图片加载完成前隐藏图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Unloaded Images</title>
<style>
img {
width: 200px;
height: 200px;
background-color: #f0f0f0; /* 设置一个占位背景色 */
visibility: hidden; /* 隐藏图片 */
}
img.loaded {
visibility: visible; /* 加载完成后显示图片 */
}
</style>
</head>
<body>
<img data-src="image.jpg" alt="Example Image">
<script>
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
img.src = img.dataset.src;
img.onload = () => {
img.classList.add('loaded');
};
});
});
</script>
</body>
</html>方法三：使用占位符
你可以使用一个占位符来代替未加载的图片，当图片加载完成后替换掉占位符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Unloaded Images</title>
<style>
.image-container {
width: 200px;
height: 200px;
background-color: #f0f0f0; /* 设置一个占位背景色 */
position: relative;
}
.placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s;
}
img.loaded {
opacity: 1;
}
</style>
</head>
<body>
<div class="image-container">
<div class="placeholder"></div>
<img data-src="image.jpg" alt="Example Image">
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
img.src = img.dataset.src;
img.onload = () => {
img.classList.add('loaded');
};
});
});
</script>
</body>
</html>应用场景
- 页面加载优化：在图片加载完成前隐藏图片，可以减少页面加载时的视觉混乱，提升用户体验。
- 懒加载：在用户滚动到图片位置前不加载图片，可以减少初始加载时间，节省带宽。
- 占位符设计：使用占位符可以提供更好的视觉反馈，让用户知道这里会有图片。
参考链接
通过以上方法，你可以有效地隐藏未加载的图片，提升页面加载体验。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
