手机棋牌合集_瑞发国际_金都娱乐城网址
&&&&&&&&&&&&&&&&&&&&&&&&&关于我们 联系方式& 招聘信息 版权申明友情链接 网站公告&&推荐产品：
Copyright&2015&&All Rights ReservedCSS优化图片未加载时的布局小技巧
/ , /
由于宽带问题，家里多人使用网络的时候，打开网站加载网页就不那么快了。特别是带有图片的情况，例如登录页：
网速慢的时候按钮这里的图片加载需要一段时间，如上图，很不美观。那么是否有办法优化图片加载慢或者未加载成功时候的方案呢？有！
先看这个按钮→←
第一排是文字按钮，加辅助背景图片。其实有两个按钮，但右侧已经看不见了，因为右侧辅助背景图片未加载出来，严重影响用户体验。
第二排也是同样按钮，同样HTML代码，区别是加了个和辅助背景图片一样颜色的背景色。即使右侧辅助背景图片未加载出来，也可以显示出来文字和背景色，至少基本按钮还是可以看出来了，目的达到了。
第三排是图片按钮，就是按钮里的文字因为CSS做出来不符合视觉稿要求，所以也放到背景图上。右侧同样有按钮，但因为辅助背景图片未加载出来，严重影响用户体验。
第四排是经过优化的图片按钮，在a链接里加了个span标签包住文字。即使右侧辅助背景图片未加载出来，也可以显示出来文字和背景色，至少基本按钮还是可以看出来了，同样目的达到了。
不知道大家做网站LOGO的时候是如何处理的，先看看→←
第一排应该是最多人用的，h1包超链接a再包img图片。缺点是如果图片未加载出来，如右侧，空白，影响用户体验。
第二排应该是了解SEO的人会用的。通过一些技巧，把a里面的文字隐藏掉，然后LOGO作为背景图。右侧是LOGO图片未加载出来的情况，空白，依旧影响用户体验。
第三排是第二排的进阶版。不是单纯的隐藏文字，而是把外层容器和图片设置一样大，把文字挤出去，从而看不到文字。右侧是LOGO图片未加载出来的情况，可以看到文字，目的达到了。
电商网站很多地方都有商品列表，有图片有标题，看→←
第一排是没有固定图片大小时恰巧图片未加载出来，下面的标题都跟上去了，导致错位。
第二排是设置了图片大小，同时还把图片外面超链接也设置了大小。这样即使图片未加载出来，位置还占着，至少不会错位，目的达到。
，转载时请注明出处}