用html、css、js 代码实现图片没有加载成功时用一定高度占位
时间: 2023-10-09 18:17:23 浏览: 57
可以使用以下的代码实现:
HTML:
```html
<div class="image-placeholder">
<img src="path/to/image" alt="Image">
</div>
```
CSS:
```css
.image-placeholder {
width: 100%;
height: 300px; /* 设置占位高度 */
background-color: #f5f5f5; /* 设置占位背景颜色 */
display: flex;
justify-content: center;
align-items: center;
}
.image-placeholder img {
display: none;
}
```
JS:
```js
const img = document.querySelector('.image-placeholder img');
img.addEventListener('load', () => {
img.style.display = 'block';
});
img.addEventListener('error', () => {
// 加载失败处理
});
```
以上代码的思路是:先使用一个占位 div 来占据图片的位置,并设置好高度与背景颜色,然后将图片设置为不可见,当图片加载成功时,再将其显示出来。如果图片加载失败,则可以在 error 事件中进行处理。
相关问题
用html、css、js 代码实现多张图片没有加载成功时用一定高度占位
可以使用以下代码实现:
HTML:
```
<div class="image-container">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">
</div>
```
CSS:
```
.image-container {
display: flex;
flex-wrap: wrap;
}
.image {
width: 33.33%;
height: auto;
min-height: 100px; /* 设置最小高度 */
object-fit: cover; /* 图片超出容器时自适应缩放 */
background-color: #e0e0e0; /* 设置占位颜色 */
margin-bottom: 10px;
}
```
JS:
```
const images = document.querySelectorAll('.image');
images.forEach((image) => {
image.addEventListener('error', () => {
image.style.display = 'none'; // 图片加载失败时隐藏图片
});
});
```
这样当图片加载失败时,会显示一定高度的占位颜色,使页面布局更加美观。
html+css+js实现图片懒加载
图片懒加载可以通过以下步骤实现:
1. 在 HTML 中,将图片的 src 属性设置为一个占位符或者空值,例如:
```
<img src="placeholder.jpg" data-src="real-image.jpg" />
```
2. 在 CSS 中,为占位符图片设置宽度和高度,以确保页面布局不会因为图片加载而改变:
```
img {
width: 100%;
height: auto;
}
```
3. 在 JavaScript 中,监听滚动事件,当图片进入可视区域时,将 data-src 属性的值赋给 src 属性,实现图片的懒加载:
```
window.addEventListener('scroll', function() {
var images = document.querySelectorAll('img[data-src]');
for (var i = 0; i < images.length; i++) {
var image = images[i];
if (image.getBoundingClientRect().top < window.innerHeight) {
image.src = image.getAttribute('data-src');
image.removeAttribute('data-src');
}
}
});
```
这样,当用户滚动页面时,图片会在进入可视区域时才被加载,从而加快页面加载速度。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)