解决图片闪烁问题（雪碧图）

最新推荐文章于 2022-04-13 09:12:56 发布

大毛驴啊

最新推荐文章于 2022-04-13 09:12:56 发布

阅读量365

点赞数

分类专栏：前端 css3 css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/softlipaaa/article/details/118554030

版权

CSS雪碧图图片闪烁 HTTP请求用户体验性能优化

关键词由CSDN通过智能技术生成

前端同时被 3 个专栏收录

65 篇文章 2 订阅

订阅专栏

css3

47 篇文章 0 订阅

订阅专栏

css

42 篇文章 0 订阅

订阅专栏

解决图片闪烁问题（雪碧图）

介绍
雪碧图的使用步骤
雪碧图的特点

介绍

将多个小图片统一保存到一个大图片中（雪碧图），然后通过调整background-position来显示相应的图片，这样图片就会同时加载到网页中，就可以有效避免出现闪烁的问题

这个技术在网页中应用十分广泛，被称为CSS-Sprite（雪碧图）

雪碧图的使用步骤

1、先确定要使用的图标

2、测量图标的大小

3、根据测量结果创建一个元素

4、将雪碧图设置为元素的背景图片

5、设置一个偏移量以显示正确的图片

雪碧图的特点

一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大毛驴啊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

《HTML+CSS》视频14 雪碧图

Han_python的博客

12-26

332

CSS-Sprite 在设置按钮的时候，可以给超链接设置伪类，然后分别给不同的伪类设置三个稍有差别的图片，实现点击按钮的交互动作。但是因为浏览器只有在使用到某个图片的时候才会加载图片，所以在hover和active的时候，会有白色的背景闪烁，用户体验差。为了解决上述问题，可以将三张图片整合到一张图片中，使用background-position来改变背景图片的显示部分，实现交互效果。这样减少了图片的总大小，并且解决了加载伪类图片的时候会闪烁的问题，这种整合图片就叫做CSS-Sprite，雪碧图。 &lt

HTML-img图片详解

主营前端方向，技术栈是vue

11-22

6226

图片(img图片标签说明和属性、src路径、png24图片问题解决方法，相对路径、格式和使用规则，背景图片的样式、重复方式、定位、简写，sprite雪碧图精灵图原因和实例说明)

参与评论您还未登录，请先登录后发表或查看评论

Android中ListView异步加载图片错位、重复、闪烁问题分析及解决方案

01-04

Android ListView异步加载图片错位、重复、闪烁分析以及解决方案，具体问题分析以及解决方案请看下文。我们在使用ListView异步加载图片的时候，在快速滑动或者网络不好的情况下，会出现图片错位、重复、闪烁等问题，其实这些问题总结起来就是一个问题，我们需要对这些问题进行ListView的优化。比如ListView上有100个Item，一屏只显示10个Item，我们知道getView()中convertView是用来复用View对象的，因为一个Item的对应一个View对象，而ImageView控件就是View对象通过findViewById()获得的，而我们在复用View对象时，

双缓冲解决界面中图片较多引起的图片闪烁问题

sungun的专栏

09-17

626

解决这类问题的方法，就是用2个DC！ CDC *pDC = this->GetDC(); CRect rc; this->GetClientRect(&rc); CBitmap* pcBmp; BITMAP bmp; CDC memDC; memDC.CreateCompatibleDC(pDC); CDC DcMemory; //建立内存缓冲 DcMem

你知道雪碧图吗？有哪些优缺点？

debug

05-10

550

这道题实际上考的是前端性能优化的一个点。本文讲解用雪碧图来优化网站。

图片闪烁问题

weixin_44296621的博客

11-04

672

解决图片闪烁问题当时刚接触时用eclipse做过一个小游戏类似于冒险岛闯关类游戏；人物的移动和跳跃是由多张图片拼凑成的连贯动作；（类似于动画片之类）多张图片就会出现图片闪烁的问题使用的是双缓冲技术解决掉的下面是当时的代码写在util包里 /** * 用双缓冲方法解决图片闪烁问题 */ Image backImg = null; Image backImg2 = null; public void update(Graphics g) { if (backI

雪碧图解决图片闪烁问题（css-sprite）

m0_51396253的博客

09-23

272

雪碧图使用步骤： 1先确定要使用的图标 2测量图标的大小 3根据测量结果创建一个元素 4将雪碧图设置为元素的背景图片 5设置一个偏移量以显示正确的图片位置 雪碧图的特点：一次性将多个图片加载进度，降低请求的次数，加快访问速度，提升用户的体验解决图片闪烁问题：可以将多个小图片同一保存到一个大图片中，然后通过background-position来显示这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题 ...

web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）

翟浩浩Android专栏

12-21

591

参考文档：https://man.ilovefishc.com/css3/ 一、基本选择器： 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样式 style 二、复合选择器： 1交集选择器 element.class || element#id 2并集选择器 element1,element2,element3,... 3后...

帧动画的多种实现方式与性能对比

热门推荐

前端向朔

07-11

1万+

概述前面我分享了《Web动画形式》，各种动画形式都可以制作出一种类型的动画，那就是帧动画，也叫序列帧动画，定格动画，逐帧动画等，这里我们统一用帧动画来表述，接下来我们就来看看帧动画有哪些打开方式吧。（高兴的小伙子）应用场景帧动画一般用来实现稍微复杂一点的动画效果，同时希望动画更细腻，设计师更自由的发挥。他可以定义到每一个时间刻度上的展现内容，我们一般用帧动画来做页面的Loadi...

CSS技巧：逐帧动画抖动解决方案

凹凸实验室

08-14

1655

笔者所在的前端团队主要从事移动端的H5页面开发，而团队使用的适配方案是: viewport units + rem。具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局。笔者目前（2017.08.12）接触到的移动端适配方案中，「利用视口单位实现适配布局」是最好的方案。不过使用 rem 作为单位会遇到以下两个难点：微观尺寸（20px左右）定位不准逐帧动画容易有抖动第一个难点的通常出现在 i...

链接伪类（:hover）CSS背景图片有闪动BUG的解决方法

12-01

例如： CSS代码 a:hover{background:url(imagepath)} 常用的解决方案：在页面底部添加以下IE6专用代码，让IE6缓存CSS背景图片至本地，这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。 XML/HTML代码复制代码代码如下: <!–[if IE 6]> [removed] document.execCommand(“BackgroundImageCache”, false, true); [removed] <![endif]–> 或者 XML/HTML代码复制代码代码如下: <!–

减弱图片闪动

weixin_30709061的博客

03-22

把Form的DoubleBuff设置为True。转载于:https://www.cnblogs.com/cccc813/archive/2009/03/22/1419134.html

雪碧图抖动问题

wang9rui的博客

09-28

218

问题记录 h5开发时出现雪碧图抖动问题解决方法 1.px+transform:scale（0.5）+媒体查询 2.使用svg 原因：css每一个元素展示到页面的都是会把单位取整的，所以会自动四舍五入，每一帧的盈亏就造成了抖动 ...

CSS中雪碧图CSS-Sprite的使用，解决图片闪烁问题

王春燕的博客

04-13

553

背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源分别引入会导致的问题：（1）切换图片时，会发现图片有一个非常快的闪烁，（2）网站性能不好解决的方法有很多，这里介绍雪碧图的解决方法，准备，开车了··· 一、雪碧图的介绍 —雪碧图官方名字叫图片整合技术（CSS-Sprite） —雪碧图的特点： 1、将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多...

雪碧图最佳实践

txiejun的专栏

08-30

2700

对于web开发人员来说，经常会处理网站上的小图标。为了减少请求次数和提高加载速度，把小图标合并成一张大图，然后利用相关技术呈现需要的图标部分。目前市面上最常用的小图标解决方案有以下两种：图标字体（svg sprite) 雪碧图（css sprite）图标字体，不作为今天的讨论范围。今天主要探讨下雪碧图的基本原理和常见的几种实现方案，并最后给出笔者认为比较高效的雪碧图开发流程。什么是雪碧图雪碧图

background-image 属性改变时会出现闪烁现象，以及解决办法

liubangbo的专栏

07-04

5206

在做一个新需求，音乐播控button 焦点样式和非焦点样式是两幅小图片。想着用background-image 来实现。移动焦点时切换background-image属性就可以了。做出来demo后才发现当第一次切换属性时会出现闪烁现象，非第一次就不会出现闪烁现象。从显示看应该非第一次用到了图片缓存问题，所以就不会出现闪烁现象了。demo如下： .div1_default{...

js实现图片闪烁

weixin_44548147的博客

02-19

5276

（作者：张滋，撰写时间：2019年2月19日） 1.首先，我们来布局用一个div包裹一张图片，并且给div一个id名称。代码如下： 2.然后，我们进行javascript的编写，其实也很简单的，主要的是三目运算符。首先第一步，我们先要获取id ，然后函数声明，在函数声明里用三目运算符，先判断imgboxs的display样式是不是none，是的话改成空值，不是的话改成none。再通过计时...

网页图片刷新闪烁解决办法

12-30

868

近日，修改公司设备的应用固件，发现视频以图片刷新方式显示的时候在IE下会闪烁。经查阅资料，修改后不再闪烁，附上代码 1 <script> 2 function onloadImage() 3 { 4 var bufferImage = new Image(); 5 bufferImage.src = "这里...

qt Qpixmap循环显示图片闪烁问题如何解决

最新发布

06-07

如果在循环显示多张图片时出现了闪烁问题，可以尝试以下两种解决方案： 1. 双缓冲技术在双缓冲技术中，我们创建一个额外的QPixmap来缓存下一张要显示的图片，等待下一次切换时再将其显示出来。这样，在切换图片时，可以先在缓冲区中绘制下一张图片，然后再将缓冲区中的图片显示到QLabel上，从而避免了闪烁。以下是示例代码： ```cpp #include <QApplication> #include <QLabel> #include <QPixmap> #include <QTimer> int main(int argc, char *argv[]) { QApplication a(argc, argv); // 加载多张图片 QPixmap images[5]; images[0].load("image1.png"); images[1].load("image2.png"); images[2].load("image3.png"); images[3].load("image4.png"); images[4].load("image5.png"); // 创建QLabel来显示图片 QLabel label; label.setPixmap(images[0]); label.show(); // 双缓冲技术 QPixmap buffer(images[0].size()); buffer.fill(Qt::transparent); // 创建定时器，每隔100毫秒切换图片 QTimer timer; int index = 0; QObject::connect(&timer, &QTimer::timeout, [&](){ QPainter painter(&buffer); painter.drawPixmap(0, 0, images[(index + 1) % 5]); label.setPixmap(buffer); index = (index + 1) % 5; }); timer.start(100); return a.exec(); } ``` 在上面的示例代码中，我们创建了一个额外的QPixmap来缓存下一张要显示的图片，使用QPainter在缓冲区中绘制下一张图片，然后将缓冲区中的图片显示到QLabel上。 2. OpenGL渲染如果双缓冲技术无法解决闪烁问题，可以尝试使用OpenGL来进行渲染。OpenGL是一种跨平台的图形库，可以在多种操作系统上实现高效的图形渲染。使用OpenGL渲染需要在Qt中使用QOpenGLWidget类来创建OpenGL窗口，然后在OpenGL中绘制图片。在切换图片时，只需要更新OpenGL中的纹理即可。以下是示例代码： ```cpp #include <QApplication> #include <QOpenGLWidget> #include <QOpenGLFunctions> #include <QOpenGLTexture> #include <QTimer> class GLWidget : public QOpenGLWidget, protected QOpenGLFunctions { public: GLWidget(QWidget *parent = nullptr) : QOpenGLWidget(parent) { setFixedSize(640, 480); setAutoFillBackground(false); } ~GLWidget() { makeCurrent(); m_texture->destroy(); doneCurrent(); } void initializeGL() override { initializeOpenGLFunctions(); glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // 创建纹理对象 m_texture = new QOpenGLTexture(QImage("image1.png")); m_texture->setMinificationFilter(QOpenGLTexture::Linear); m_texture->setMagnificationFilter(QOpenGLTexture::Linear); m_texture->setWrapMode(QOpenGLTexture::ClampToBorder); } void paintGL() override { glClear(GL_COLOR_BUFFER_BIT); // 绘制纹理 m_texture->bind(); glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-1.0f, -1.0f); glTexCoord2f(1.0f, 0.0f); glVertex2f(1.0f, -1.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(1.0f, 1.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(-1.0f, 1.0f); glEnd(); m_texture->release(); } void updateTexture(int index) { // 更新纹理 m_texture->setData(QImage(QString("image%1.png").arg(index + 1))); update(); } private: QOpenGLTexture *m_texture; }; int main(int argc, char *argv[]) { QApplication a(argc, argv); // 创建OpenGL窗口 GLWidget widget; widget.show(); // 创建定时器，每隔100毫秒切换图片 QTimer timer; int index = 0; QObject::connect(&timer, &QTimer::timeout, [&](){ widget.updateTexture(index); index = (index + 1) % 5; }); timer.start(100); return a.exec(); } ``` 在上面的示例代码中，我们使用了QOpenGLTexture来创建纹理对象，然后在OpenGL中绘制纹理。在切换图片时，我们只需要更新纹理即可。这种方式可以避免闪烁问题，同时还能实现更流畅的视频效果。