无闪烁、SEO友好的完美图像替换(pFIR_improved)

图像替换是网站前端设计中经常使用的技巧之一。本文在pFIR图像替换技术的基础上,提出了一个改进版本。

什么是图像替换(FIR)?

考虑这样一种情况:<h4>Image Replacement</h4>,效果:

Image Replacement

现在希望用一张图片替换掉文字内容,使得网页更加丰富多彩(很多情况下是为了表现出特殊字体效果)。做到这种效果:

用JavaScript检测浏览器是否打开图像显示

JavaScript能不能检测浏览器是否打开图像显示?看似一个非常简单的问题,但是网上却很难查到相关资料。大部分用户不会关闭图像显示,但是仍有少数非宽带用户关掉了图像。为了使网站变得更加人性化、具有更好的可用性,Web前端工程师有时需要通过JavaScript检测“显示图像”功能是否打开。

方法一:图像尺寸法

未指定width、height属性的<img>标签,在图片成功下载的情况下能从width、height属性中取得图片的真实尺寸,而图片功能未开启时则是一个固定的、比较小的尺寸(相当于那个“红叉”)。为此,可以插入一张尺寸较大的图片,然后读取width属性,如果尺寸与原图不符说明图片显示没有开启。