如何使用css检查图像是否已加载或替代图像是否正在显示？
在前端开发中，可以使用CSS来检查图像是否已加载或替代图像是否正在显示。具体的方法是通过CSS的伪类选择器:before和:after来设置图像的样式，并通过判断样式是否生效来判断图像是否已加载或替代图像是否正在显示。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
position: relative;
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
.image-container:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('loading.gif'); /* 加载中的替代图像 */
background-repeat: no-repeat;
background-position: center;
}
.image-container img {
display: none;
}
.image-container img.loaded {
display: block;
}
</style>
</head>
<body>
<div class="image-container">
<img src="image.jpg" onload="this.classList.add('loaded')" alt="Image">
</div>
</body>
</html>在上述代码中，我们创建了一个名为.image-container的容器，设置了宽度和高度，并设置了一个背景色作为替代图像的背景。然后，通过:before伪类选择器设置了一个加载中的替代图像。接下来，我们在容器内部插入了一个<img>标签，并通过onload事件监听图像加载完成的事件。当图像加载完成后，我们通过给<img>标签添加loaded类来显示图像。
这样，当图像加载完成时，替代图像将被隐藏，实际图像将显示出来。如果图像加载失败或未找到，替代图像将一直显示。
这种方法可以用于检查图像是否已加载或替代图像是否正在显示，可以应用于任何需要对图像加载状态进行控制的场景。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
相关·内容
1回答
如何使用css检查图像是否已加载或替代图像是否正在显示？
html、css
我只想在未加载图像并且显示默认样式时应用以下样式。img.avatar{ color: white; padding-top: 10px;但是，如果我在找到并加载图像时应用它，它将使图像失真。
浏览 2提问于2017-07-19得票数 1
1回答
如何检查是否在Selenium中加载了背景图像？
selenium、webdriver
有一个有大量图像的页面。这些图像被设置为CSS样式背景，如下所示：页面加载，但有时，有些图像是而不是加载的。URL仍然被设置，DIV有正确的大小，只有图像本身没有显示。(这可能是由于浏览器、服务器或网络问
浏览 2提问于2013-11-11得票数 1
1回答
在媒体查询中使用移动横幅加载时间
css、mobile、media-queries、loading、banner
在计算机上加载页面时，我有普通的横幅。但是，我希望在移动(媒体查询)上拥有更小的版本(所以加载速度更快)。我的问题是:它是如何装载的？在移动或页面中更改横幅以任何方式加载所有文件，这样做都是浪费资源，有什么好处吗？如果这不能提高加载时间，那么还有其他方法吗？
浏览 2提问于2021-12-22得票数 1
回答已采纳
3回答
如果在Vue 3中加载了动态变化的图像，则更改CSS
vue.js、vuejs3
我正在尝试根据是否加载了图像来更改div的CSS类。图像URL取自<input>字段，因此<img src>可以更改。我已经设法使用@load事件在第一个页面加载时设置了CSS类。但是，如果我将输入字段中图像的URL更改为不存在的图像，则CSS不会更改。如何跟踪输入值是否已更改并“重新检查</em
浏览 39提问于2021-11-08得票数 0
回答已采纳
2回答
Bootstrap -出现映像加载错误时的回退
javascript、html、twitter-bootstrap、css
我想在无法加载原始图像时显示no image-placeholder。更新:这不适用于只有一张图片的页面。将有多个不同大小的图像。类似社交媒体网站的东西。因此，修
浏览 2提问于2015-07-16得票数 0
2回答
图像已经从显示器上消失了，但它仍然存在
html、css
我设置了一个页面，一切都很顺利，但是当我将代码移到Dreamweaver中时，一个图像消失了。我已经摆弄这个东西好几个小时了，我都快把头发拔出来了。CSS在页面本身，因为它是一页交易。缺少的图像是UPS徽标，位于其他客户徽标旁边，排在最后。我想给你一个行号，但是没有:( <!utf-8"><title&
浏览 1提问于2015-06-29得票数 0
1回答
如何使用react钩子检测How组件中的所有映像是否已加载
javascript、reactjs、react-hooks、next.js
我正在处理下一个js应用程序。我知道ES6，但新的反应。我有一个组件，它是从useEffect从另一个组件获取数据函数调用的。我正在使用它，在我的渲染函数中有{HeaderResults(cars)}。我想要的是，只有在加载了所有图像或显示了加载
浏览 2提问于2020-10-07得票数 0
回答已采纳
1回答
我使用PHP文件作为头文件，然后在需要的地方包含它。这是我的CSS： margin-top:0; background-image: url("slike/dekorativni.jpgbackground-repeat: no-repeat; position: relative;当我将背景设置为某种颜色时，它会显示彩色背景，但图像不会显示。
浏览 0提问于2017-05-31得票数 0
1回答
OpenCV灰度转换误差
python、opencv、video
但是，我使用的是OpenCV教程提供的视频，所以我不明白为什么它们不起作用。下面是我正在使用的完整代码：import cv2
p0 = good_new.reshape(-1,1,2)
cap.release()
我正在
浏览 3提问于2014-03-30得票数 0
1回答
Chrome和火狐之间的clientWidth区别？
javascript、firefox、google-chrome
我正在编写一个javascript函数，它等待所有的图片都加载到网页上，然后修改它们的宽度以将它们放入一个框中。在Chrome上，它就像一个护身符(在图片加载之前，clientWidth是0)，但在火狐上，它会立即变成一个很小的数字(在我的例子中是24，而不是~700)，所以实际的缩小部分发生在图片加载之前(所以它保持在相同的大小
浏览 1提问于2011-12-23得票数 0
回答已采纳
1回答
jquery图像加载检查错误
javascript、jquery、image
我正在尝试使用以下代码检查是否所有图像都已加载到容器中 $(".slide img").each(function (index){ $("<img/>").attr("src", fakeSrc).css<
浏览 2提问于2013-11-24得票数 0
2回答
在joomla中，图像不会显示在图像幻灯片横幅中
joomla
我已经为我的site.and下载了一个幻灯片放映模块，我已经将它安装在我的网站上，该模块显示在网站输出中，但图像没有显示。我对如何在slideshow.Please中显示图像感到困惑。
浏览 3提问于2011-04-04得票数 0
3回答
加载事件时的jQuery不会触发脚本
jquery、css
首先，我查看了onLoad事件，但是当我读到它时，我发现我已经或将要被弃用，所以我搜索并找到了以下信息，以便使用on事件检查是否加载了图像： left: &#
浏览 3提问于2015-07-30得票数 2
1回答
如何检查缩略图背景图片是否等于jQuery中的展示图片？
javascript、jquery、fadein
我想在缩略图尚未加载到展示窗口时淡入淡出。否则我不想淡入，因为图像已经加载好了，淡入看起来很奇怪。 var newImage = $(this).attr('rel');
$('.catalogDetail .mainImage').css
浏览 1提问于2013-03-20得票数 0
2回答
Javascript:图像加载太慢
javascript、jquery、image
我有一个用来创建对话框的图像数组。 //Edit dialog position} else {
/
浏览 3提问于2011-06-30得票数 2
回答已采纳
1回答
替代对象匹配？
javascript、jquery、html、css
我正在寻找一种替代css对象-适合火狐的属性，IE.The属性在Chrome和Opera中运行良好，但在火狐和IE中不起作用。我尝试了imgLiquid插件，但当图像源将被更改时，图像不会出现。(图像将每秒钟从网络摄像机加载)
是否有1或2的解决方案或替代方案？
浏览 2提问于2014-04-17得票数 0
1回答
在Nightwatch.js中验证图像加载
nightwatch.js
我正在尝试用Nightwatch.js编写一个脚本，以验证给定页面上的图像是否正确加载。我已经设法让它循环浏览页面上的图像，并为我提供URL，但我无法让它加载图像并返回宽度/高度。(其思想是检查以确保宽度>0，以确保其正确加载。)
我在下面的脚本中得到了“完成”消息，但从未看到“已加载...”、宽度、高度或“！”值输出。对于使用Nightwatch
浏览 4提问于2018-02-22得票数 0
回答已采纳
3回答
检查页面上的图像是否被破坏
c#、jquery、image、coded-ui-tests
如何检查加载的图像是否已正确加载或损坏？我不想把'onload‘事件添加到图像中。谢谢!
浏览 0提问于2016-03-10得票数 0
回答已采纳
3回答
如何通过元刷新强制缓存镜像？
c#、asp.net、html、caching
<meta http-equiv="refresh" content="10" />
如何停止强制刷新页面中的图像？我已经尝试设置缓存控制，但是浏览器(IE7)仍然刷新页面中的50+图像。
浏览 3提问于2009-01-23得票数 4
回答已采纳
1回答
Uiimageview在iPhone 6和6 plus中不显示
ios、objective-c、uiimageview、iphone-6
在自定义单元格中，iPhone 6和6 plus Uiimageview不显示。但是当我打印边框的时候，它就在那里。
NSLog(@"%f-%f-%f-%f",cell.
浏览 2提问于2015-04-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
