开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用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

相关搜索:使用pyautogui检查图像是否显示在屏幕上的最快方法如何使用Angular 8单元测试检查图像是否存在于给定路径中？如何使用Ansible攻略检查机器是否已启动并正在运行如何使用CSS或SVG滤镜效果从Gmail composer复制图像突出显示效果？如何使用cypress检查背景图像是否已加载？如何使用html/css/jquery/bootstrap显示/隐藏图像，并且不留空格或不对齐？如何使用if语句检查图片框是否包含特定图像如何使用JavaScript检测图像是否被粘贴或拖放到可满足的区域？如何使用PIL检查.webp文件是否为gif或python中的图像？如何使用react或css在图片库中一次突出显示一张图像

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端技术提高页面加载速度

一、使用良好的结构可扩展 HTML (XHTML) 具有许多优势，但是其缺点也很明显。XHTML 可能使您的页面更加符合标准，但是它大量使用标记（强制性的和标记），这意味着浏览器要下载更多代码。所以，事情都有两面性，尝试在您的网页中使用较少的 XHTML 代码，以减小页面大小。如果您确实不得不使用 XHTML，试着尽可能对它进行优化。

02

如何使图像在 HTML 中可拖动？

在网页中创建可拖动元素的能力是 HTML5 为 Web 开发人员提供的新功能和技能之一。它成为一项非常流行和广泛使用的功能。它只是意味着通过使用光标将图片拖动到另一个位置来将图片移动到另一个位置。通过使用鼠标或触摸动作，用户将能够在页面上拖动图像或其他内容。在本文中，我们将了解如何在 HTML5 中构建可拖动的图像。

01

所有前端都必须知道的 jQuery 技巧

前端是一个很繁杂的工作，在工作中会考虑到很多细节，也许有时候一个细节没有处理好，就会造成很大的麻烦。但是一些小技巧就能够避免。作为一个新手，即使掌握一个小技巧都能够节省很多时间。以下几个 jQuery 技巧，也许你工作中能够用上。

所有前端都必须知道的 jQuery 技巧

前端是一个很繁杂的工作，在工作中会考虑到很多细节，也许有时候一个细节没有处理好，就会造成很大的麻烦。但是一些小技巧就能够避免。作为一个新手，即使掌握一个小技巧都能够节省很多时间。以下几个 jQuery 技巧，也许你工作中能够用上。 1. 检查图像是否加载　　有时为了继续脚本，你可能需要检查图像是否全部加载完毕： $('img').load(function () { console.log('image load successful'); }); 　你也可以用 ID 或类替换

07

所有前端都必须知道的 jQuery 技巧

前端是一个很繁杂的工作，在工作中会考虑到很多细节，也许有时候一个细节没有处理好，就会造成很大的麻烦。但是一些小技巧就能够避免。作为一个新手，即使掌握一个小技巧都能够节省很多时间。以下几个 jQuery 技巧，也许你工作中能够用上。

02

【Web技术】610- Web上的图片技巧

前端开发者在构建网站时需要做的一个决定是添加图片的技术。它可以是一个HTML ，或者是通过CSS背景生成的图片，也可能是SVG <image>。选择正确的技术很重要，对网站的性能和可访问性起着巨大的作用。

03

前端运用图片的技巧总结

原文 | https://ishadeed.com/article/image-techniques/

02

用惰性加载优化 React 程序[每日前端夜话0x6D]

惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要，就不要渲染它们。例如，如果我们有一个要显示的文章列表，开始时应该只渲染视口上的内容。这意味着其他元素将在以后按需呈现（当它们位于视口中或即将在视口上时）。

02

一些好用的jquery技巧

1、返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画： // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); Back to top 改

06

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

Lazy Load 这个 jQuery 插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。如果一个人不看下面的图片，那加载下面的图片就是一种浪费。

01

【学习图片】02：关键性能问题

使用这个属性可能很简单，但它对性能的影响可以非常有效的：如果图像不出现在视口中，那么就不会发出请求，并且也不会浪费带宽。

02

180多个Web应用程序测试示例测试用例

180多个Web应用程序测试示例测试用例假设：假设您的应用程序支持以下功能各种领域的表格儿童窗户应用程序与数据库进行交互各种搜索过滤条件和显示结果图片上传发送电子邮件功能数据导出功能通用测试方案 1.所有必填字段均应经过验证，并以星号（*）表示。 2.验证错误消息应正确显示在正确的位置。 3.所有错误消息应以相同的CSS样式显示（例如，使用红色） 4.常规确认消息应使用CSS样式而不是错误消息样式（例如，使用绿色）显示 5.工具提示文本应有意义。 6.下拉字段的第一项应为空白或诸如“选择”

02

现代图片性能优化及体验优化指南

图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。

03

现代图片性能优化及体验优化指南 - 懒加载及异步图像解码方案

图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。

02

仅需 5 分钟，快速优化 Web 性能的10 个手段

作者：Marc 译者：前端小智来源：dev 本人已经过原作者制授权翻译。在这篇文章中，主要介绍10种快速提高网站性能的方法，你只需5分钟内就可以将它应用到你的网站上，废话不多说，让我们进入正题吧

02

浏览器之性能指标-LCP

前几天，我们写了关于Chrome的FCP,看后台数据，反响还是不错的。那么，今天我们继续讲另外一个比较重要的性能指标LCP。

03

【CSS】333- 使用CSS自定义属性做一个前端加载骨架

我们在打开APP或者网站的时候，经常可以看到这样的效果，在内容加载完成之前，会有一个骨架动画的出现，这种加载方式比传统的进度条方式要友好的多，但是很多朋友都不知道这种效果是如何做出来的，下面我们一步步的来看看吧。

03

快速优化 Web 性能的10 个手段

优化网站的性能需要花费大量的时间，并且如果要根据自己的需求进行优化则花费的时间可能更多。

03

面试官：如何提升应用的Lighthouse 分数

Lighthouse 是用于测试网页性能工具最有用的技术之一。它具备了自动化，并可以测量网站的可访问性和 SEO。更重要的是，它目前是开源的并且可以免费使用。同时，它可以用来测试渐进式 Web 应用程序。

04

学习 canvas 的 globalCompositeOperation 做出的神奇效果

最早知道 canvas 的 globalCompositeOperation 属性，是在需要实现一个刮刮卡效果的时候，当时也就是网上找到刮刮卡的效果赶紧完成任务就完了，这次又学习一次，希望能加深理解吧。

02

css中的图片无法显示怎么办

服务器需要将图像文件配置为正确的 MIME 类型。常见的图像 MIME 类型包括：

01

解决OpenCV Error: Assertion failed (ssize.width > 0 && ssize.height > 0) in cv::re

当我们在使用OpenCV进行图像处理时，有时候会遇到如下错误信息：OpenCV Error: Assertion failed (ssize.width > 0 && ssize.height > 0) in cv::resize, file C:\proj。这个错误通常是由于图像的宽度或高度为0导致的。在本篇文章中，我将介绍一些可能导致这个错误的原因，并提供一些解决方法。

03

分享前端开发常用代码片段

如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。

05

分享前端开发常用代码片段-值得收藏

如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。

03

网站性能优化

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。　　减少页面组件的方法其实就是简化页面设计。

04

Yahoo!网站性能最佳体验的34条黄金守则(转载)

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。 CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage - Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧！

01

删除或失效WordPress文章中的图像大小属性

认情况下，WordPress会将图像元素width和height属性添加到图像元素中。这些属性会影响CSS宽度和高度属性，图片延迟加载时默认图片的大小，可通过 PHP、JavaScript 和 CSS 来删除属性，或者使用其失效。

04

2020前端性能优化清单（二）

2015 年，Google推出了[2]Brotli[3]，这是一种全新的开源无损数据格式，并被现在所有现代浏览器支持[4]。实际上，Brotli 似乎比 Gzip 和 Deflate更有效[5]得多[6]。取决于您的设置，压缩可能会（非常）缓慢，但是这样慢的压缩速度最终也会带来较高的压缩率。不管怎样，它都能快速解压缩。这篇文章可以估算站点使用 Brotli 压缩可以节省的大小[7]。

01

web 图像技术：前端引入图片的各种方式及其优缺点

前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是标签，或者是通过CSS background 属性，还可以使用 SVG <image>。选择正确的方式是很重要的，它对性能和可访问性有很大的影响。

02

用Jetpack的Site Accelerator为网站CDN加速

Jetpack 的Site Accelerator站点加速器（前身为 Photon，注意：“Photon”现在是站点加速器的一部分）允许 Jetpack 优化图像并通过他们的全球服务器网络CDN提供图片和静态文件（如CSS 和 JavaScript），进而帮助您更快地加载页面。

04

【译】Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例

前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是HTML ，也可以是通过CSS背景生成的图片，也可以是SVG <image>。选择正确的技术很重要，并且可以在性能和可访问性方面发挥巨大作用。

02

详细的聊一聊如何使用响应式图片，提升网页加载速度

确保图片在所有屏幕尺寸上都能良好显示是一项困难的任务，因为你需要考虑图片的大小、图片的放置位置、显示图片的比例、用户连接的速度等等众多因素。结果是，大多数开发者只会为所有屏幕尺寸使用同一张图片，并让浏览器调整图片的大小以适应屏幕。这是一种不好的做法，因为浏览器仍会下载完整尺寸的图片（通常非常大），即使它只以其一部分尺寸显示。这会浪费用户的带宽，并且会显著减慢页面加载速度（尤其是在较慢的连接下）。

03

标签的选择

这么多篇文章下来，大家对如何进行页面布局想必已经有了自己的一些想法，特别是上周的文本样式的介绍，让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有什么问题的情况下，我们需要考虑的就是如何能够实现的更好，能够让我们做的页面代码精简度、性能让能够更符合我们的开发规范。所以今天我们着重的给大家来讲解一下如何选择标签，以最精简的代码实现我们的页面制作。本文内容概要： 1 标签的默认样式 2 标签的语义性 3 标签的嵌套规则 4 标签的选用原则 5 合理选择标签的案例展示一、标签的默认样式通过这么

09

优化 CSS 代码的12个小技巧

上述属性都是对性能要求比较高的。如果这些属性使用较少，那这就不是问题。但是如果一个页面出现几百次，那么整体的CSS可能会受到影响，所以要谨慎使用。

04

web图像的常见应用策略与技巧

文章主要讲述了如何通过修改SVG的src属性来加载不同版本的SVG文件，并介绍了两种回退策略：使用image-set和动态设置src。同时，也介绍了一些关于加载优化的技巧，例如使用data uri和base64编码。在总结中，提到了这些技术的使用场景和注意事项，以帮助读者更好地理解和应用这些技术。

03

一个前端大佬的十年回顾 | 漫画前端的前世今生

作者 | 京东科技胡骏岁月如梭，十载流年前端技术，蓬勃向前 HTML，CSS，JavaScript 演绎出璀璨夺目的技术画卷回到十年前，前端技术就像一名戴着厚重眼镜的书呆子，总是小心翼翼，被各种各样的浏览器兼容性问题欺负（就像在小学被欺负一样）。但随着时间的推移，这个书呆子开始锻炼，变得越来越强壮，终于能够对抗那些讨厌的兼容性问题。进入中学时期，前端技术遇到了那个改变它一生的朋友——jQuery。在 jQuery 的帮助下，前端技术变得更加自信，能够在各种浏览器之间轻松穿梭（就像

02

opencv(4.5.3)-python(二)--图像入门

作为第一步，OpenCV的python库被导入。正确的做法是另外给它起一个名字cv，在下面的内容中，它被用来引用这个库。

02

Chrome开发者工具的11个高级使用技巧

本文作者从开发者角度出发，介绍了几个关于 Chrome 开发者工具的高级用法。熟练使用这些高级用法可以大大地提高你的生产力。

06

浏览器之性能指标_FCP

在前几天，我们写了，关于如何利用fetchpriority对页面资源进行优先级的处理。

03

5个方法对于重量级网站的图片优化

图像是每个网站的关键组成部分。根据 HTTP Archive ，图像占网页上需要加载总数据的比例达60％以上。几乎成为所有网站上重要的组成部分，无论是电子商务，新闻，时尚网站，博客还是旅游门户网站，图像优化都很重要，如果你想加快你的图像重量级网站访问速度，这也许是很容易做到的事情。

02

如何优化网页图片加载速度

常见问题：上传到网站的商品图，新闻图等图片直接由相册拍摄的原始照片上传，或者简单美化后上传，图片动辄4M、8M等，导致网站打开十分缓慢。

02

深入了解CSS中的object-fit和background-size——CSS图片尺寸控制&应用场景

摘要：在这篇文章中，我们将讨论object-fit和background-size是如何工作的，什么时候可以使用它们，为什么，以及一些实际的使用案例和建议。让我们深入了解一下。

04

web图像的常见应用策略与技巧

本文介绍一些关于响应式图像的适配应用策略，回退原理，SVG的换色技巧，雪碧图的百分比定位计算公式等相关的一些小知识点，目的在于帮助一部分同学快速的理清图像应用思路，以及一些web图像的应用技巧。 1.响应式图像的应用与回退特点：应用简单，上手容易，性能表现良好难点：lazyload实现根据不同设备，不同分辨率，不同像素比使用的响应式图像，常用的有两种场景： 1.1固定尺寸图像基于设备像素比选择，很多网站logo就是固定宽度图像的一个例子，不管viewport的宽度如何，始终保持相同的宽度。在dom

01

web图像的常见应用策略与技巧

文章主要讲述了如何通过设置图片质量、使用矢量图片、设置图片压缩、懒加载等技术来优化图片的加载和显示效果，同时介绍了在特殊场景下如何实现图片的优化显示，最后还介绍了一些关于图片优化的技巧和经验。

09

css入门（5）

在本章第1节“背景样式概述”，我们已经给大家分析了在CSS中控制元素的背景样式包括背景颜色和背景图像，其中控制元素的背景图像涉及到的属性比较多，下面稍微给大家讲解一下，以便为读者理清后面的学习思路。

03

SVG SSRF 绕过

我正在测试一个应用程序，它是一个基于 Web 的分析解决方案，它与世界各地的研究机构打交道，以分析新出现的研究趋势并创建报告。

02

每个程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段，可以帮你快速开发. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fi

01

你的博客用不着什么JavaScript框架

今年年初，我终于决定将自己的网站从基于 PHP 的 CMS 移植到基于 JavaScript 的静态网站生成器（SSG）了。原因如下：

01

OpenCV基础02--从文件显示加载图像

在本节中，我将向您展示如何使用 OpenCV 库函数从文件加载图像并在窗口中显示图像。

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭