美文网首页
移动端 css Sprite 解决背景图加载问题

移动端 css Sprite 解决背景图加载问题

作者: 张延伟 | 来源:发表于2018-04-17 11:46 被阅读26次

问题:有一个按钮,点击按下的效果和没按的效果不一样,我做了两张图切换,按下加一个class切换背景图,就发现中间有一个瞬间什么图都没有,再按又是好的。

分析:原因是刚开始进页面,按下的按钮的背景图没有加载,当我按下按钮开始加载,需要一点点时间,所以有一瞬间没有图,接着不会出现是因为这张图加载出来了。

解决:做一张雪碧图,把按下和没按的效果放在一张图里,那样页面一进来就加载完成,再切换时就不存在要去加载另一张图,就不会闪现没有的效果。

相关文章

  • 移动端 css Sprite 解决背景图加载问题

    问题:有一个按钮,点击按下的效果和没按的效果不一样,我做了两张图切换,按下加一个class切换背景图,就发现中间有...

  • html5 video 在移动端加载黑屏问题怎么解决 ?

    html5 video 在移动端加载黑屏问题怎么解决 ?html5 video 在移动端加载黑屏问题怎么解决 ?h...

  • CSS 样式介绍(五)

    1. css 精灵技术(sprite) css 精灵技术(sprite):将多个小背景图片合成一个大的背景图片(精...

  • 任务九~CSS常见技巧

    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite把多个背景图片合成为一张,通...

  • 任务9-2

    1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite能够把一些小的背景图片整合...

  • 【前端入门单词】

    style 样式 type 类型 doctype 文档类型 css sprite 背景图压缩工具 charset ...

  • 前端开发遇到的问题合集

    解决:hover 伪类在移动端二次点击的问题 用 css 写出的 hover 效果,在移动端,需要点击触发,但是在...

  • IconFont

    1、传统图标(Sprite 雪碧图)css Sprite 优点:减少http请求次数,使页面加载速度更快,提高网页...

  • 雪碧图CSS Sprite的应用

    CSS雪碧,即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并...

  • CSS常见技巧

    CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS Sprites其实就是把网页中一些背景图片整合...

网友评论

      本文标题:移动端 css Sprite 解决背景图加载问题

      本文链接:https://www.haomeiwen.com/subject/zsuukftx.html