首页 > 代码库 > ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享

ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享

引子:
 
 
 前段时间 做新版2.0 首页 的时候, 总感觉 新版首页 线上 精彩回顾下的 2张图片颜色怪怪的,当时以为是图片压缩太厉害导致的,由于实在太忙就没太在意!以下 是来自线上 截图:
 
 红色方框 我认为  那2张 怪怪的 图片,大家感受下颜色是否不一样!
 
 技术分享
 
问题描述:
 
       今天,测试同学找到我,说新版首页 精彩回顾下方 2张图片 在 ie8下 图片展现不出来了!
 
 
 
开始排查:
 
 通过 浏览器 查看图片 DOM结构, 代码如下:
 
 <img data-original="http://file.xxxx.com/view/banner/09e7286d39013387ff07e0efe7dc8c6ab3a51aef.jpg"  src="http://www.mamicode.com/http://g.tbcdn.cn/s.gif" width="174" height="113” >
 
 
起初, 第一反应是图片地址问题,结合查看到的图片DOM结构,怀疑是 image  layzload 懒加载 机制导致,故而 尝试把 图片真实地址 直接写在 图片 img src 地址上 解决!
 
    ps:图片懒加载机制原理:
 
        通俗的讲就是js检测 用户鼠标滚动到 可视区域后,将预先埋在 img元素上 data-original 真实图片地址 替换到 图片 src上,从而达到图片懒加载的目的,实现性能优化!
 
 
结果 还是不行! 
 
呃~
 
 
 
进一步分析:
 
 快速列举下相关要素

  • 非 ie浏览器 正常显示图片;
  • 小于等于 原生ie 8 以下无法正常展现; 
  • 非图片 懒加载检测机制问题;
  • 直接在浏览器中访问 图片地址 非 ie浏览器都正常显示, 原生ie8 及其以下不能正常显示(出现图片加载失败叉叉图标 )

 

 
初步分析结论:
 
     基于上述情况, 由此 分析出是2个可能性:

  • 图片地址问题(如:合法性、安全性等) 
  • 图片本身问题


 
继续排查:
 
最初怀疑是 file路径关键字 影响(纯属自己假设歪歪),因为在window系统下,//file 是本地图片 window系统特有的路径地址,但 :

  1. ie8以上ok;
  2. 浏览器未发出警告和错误通知!说明url路径 安全、合法~
  3. 其他 同域名:http://file.xxxxx.com/ 下的图片展现正常!


 
故而 图片url地址 首先被 排除掉!
 
 


进一步排查:
 
将 无法正常 显示的图片 下载下来,二话不说,先查看图片信息:

  • 怀疑问题图片url地址: http://file.xxxxxx.com/view/banner/bdb3a244b3ba0774512223bd5442fa46c1ea7fbb.jpg
  • 查看文件信息,如图:

技术分享
 
 
 
 
看到没,CMYK!
 
猛然一惊,一眼 就瞅到 CMYK,顿时发现了 根本问题所在!于是也明白了 之前总觉得图片颜色怪怪的根本原因了!
 
 
 
先 特写感受下 RGB 和 CMYK 图片差异:
     
     以下2张相同图片,使用 不同颜色模式 视觉差异( 红色方框 的是 用于工业印刷用的),大家感受下:
 
 技术分享

 
CMYK颜色模式 简单解释:
 
     CMYK 颜色模式 主要用于  工业排版印刷使用,也被印刷业 称之为4色加色增强模式(青、品红、黄、黑值), 并不是 适用于 基于“光”色的3原色(红 绿 蓝) 256阶色的 屏幕 图片展示
 
  学过平面视觉设计或动画相关、美术专业 同学都知道,这里我就不多叽歪了! 
 
 
知道了图片主流这2种(总共3种) 颜色模式的差异,但和浏览器有什么关系呢?不急,往下看!
 
 
 
CMYK 各大 浏览器 支持情况:

 
Browser support for CMYK encoded images

BrowserRGBCMYK
IE6, 7, 8YesNo
IE9YesYes
Firefox 2.xYesNo
Firefox 3.x -YesYes
Safari 4-YesYes
Google Chrome 5 -YesYes 

 
 
 
 
解决之道:
 
修复这个问题  (Fixing this issue)
 
Image editors such as Adobe Photoshop,  The Gimp, and others is capable of identifying if a jpg image is a CMYK image and saving a CMYK jpg as a RGB jpg. 
 
 
最佳方式,使用 Adobe Photoshop 图片编辑器或其他能够转换的图片编辑器,将图片 颜色模式 从CMYK  保存为 RGB 颜色模式即可!比如我的:

 技术分享
 
 
 
至此,保存重新上传后,ie8等显示正常!10分钟,问题解决!!!
 
 
 
 
刨根问底: 
 
 
     可能你会问? 既然 你说图片色彩模式有问题,那为什么 非ie 浏览器 都可以呢? 
 
 其实你让我回答,我只能说 人家 浏览器渲染引擎 比你ie的 trident引擎 先进,兼容、渲染机制处理的好! 从支持浏览器支持列表中也可以看到, Firefox 2.x 想当初也是不行滴!
 
 
 对于这个问题, 微软在新一代浏览器 里已经修复,故而从 ie9开始,可以正常展现!事实上从上面的支持 表中 或者 实际操作效果 来看,也是如此!
 
 
 
 
后记:
 
 
     这是一个隐藏很深,不容易被发现的 细节 所带来的图片展现问题, 我这里也只是有针对性的、简单的 剖析下原因! 抛砖引玉,供大家参考! 
 
 希望 运营同学、PD同学等其他 上传图片 的使用者们,注意下这个问题,谢谢!
 

ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享