由于宽带问题，家里多人使用网络的时候，打开网站加载网页就不那么快了。特别是带有图片的情况，例如登录页：
网速慢的时候按钮这里的图片加载需要一段时间，如上图，很不美观。那么是否有办法优化图片加载慢或者未加载成功时候的方案呢？有！
先看这个按钮→DEMO←
第一排是文字按钮，加辅助背景图片。其实有两个按钮，但右侧已经看不见了，因为右侧辅助背景图片未加载出来，严重影响用户体验。
第二排也是同样按钮，同样HTML代码，区别是加了个和辅助背景图片一样颜色的背景色。即使右侧辅助背景图片未加载出来，也可以显示出来文字和背景色，至少基本按钮还是可以看出来了，目的达到了。
第三排是图片按钮，就是按钮里的文字因为CSS做出来不符合视觉稿要求，所以也放到背景图上。右侧同样有按钮，但因为辅助背景图片未加载出来，严重影响用户体验。
第四排是经过优化的图片按钮，在a链接里加了个span标签包住文字。即使右侧辅助背景图片未加载出来，也可以显示出来文字和背景色，至少基本按钮还是可以看出来了，同样目的达到了。
不知道大家做网站LOGO的时候是如何处理的，先看看→DEMO←
第一排应该是最多人用的，h1包超链接a再包img图片。缺点是如果图片未加载出来，如右侧，空白，影响用户体验。
第二排应该是了解SEO的人会用的。通过一些技巧，把a里面的文字隐藏掉，然后LOGO作为背景图。右侧是LOGO图片未加载出来的情况，空白，依旧影响用户体验。
第三排是第二排的进阶版。不是单纯的隐藏文字，而是把外层容器和图片设置一样大，把文字挤出去，从而看不到文字。右侧是LOGO图片未加载出来的情况，可以看到文字，目的达到了。
电商网站很多地方都有商品列表，有图片有标题，看→DEMO←
第一排是没有固定图片大小时恰巧图片未加载出来，下面的标题都跟上去了，导致错位。
第二排是设置了图片大小，同时还把图片外面超链接也设置了大小。这样即使图片未加载出来，位置还占着，至少不会错位，目的达到。
后记：当大家都能写页面的时候，细节就成区分高下的判定条件了。
好主意！
啥好主意？
😛
你名字我猛一看还以为是“尼玛” 😮
这个细节很多人都不注意，这方式挺好
你头像的字设计得挺好的 😀
一直都在乎细节的，需要配合技术。
只有你了解相关技术，才会做得更好 😆
除夕来拜个年
话说一直不太喜欢一个网站太多图
呵呵，你的技术还是那么牛！
祝新年快乐，马上发大财！
好有讲究。新春快乐！
新春愉快~
😈 现在看着图片, 我都要加width\height, 😮 😮 这是有病么
我也有这是癖好，不过固定不变大小的图片，加宽高挺好的 😈
我还是比较在意ONS的含义是什么。
one night stand（一“页”情）
只可意会不可言传
裤带已解
肥皂已丢
楼下已捡
这个主意不错哦！ 😳
这个是怎么弄的呢？
我感觉我这里似乎不会有这种问题… 😉
哈哈，学习了。博主，你的评论框的"Name"跟输入框没有距离，感觉很别扭。我用的Chrome.
等着换主题，不改了
学到一招！
这个细节经常忽略。
logo技巧不错，希望多分享更多经验。
😉 不错
其实还可以使用FontAwesome，去掉这些小的CSS图标，或者使用CSS Sprite，一次GET就好。
你说的应该是这个吧：https://ximan.org/436.html
CSS Sprite确实不错
这个可以有，没事的时候就考虑各种可以改进的地方。
提升用户体验，减少页面重绘提高性能，关注细节，赞！
这个对用户体验很好。下次再我网站也用上。
给你32个赞