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

摘要:
问题描述:今天,测试生找到我,说以下两张新版本主页精彩回顾的图片无法在ie8下显示!说明URL路径安全合法~其他域名与:http://file.xxxxx.com/下图显示正常!因此,首先排除图像url地址!进一步的故障排除:下载无法正常显示的图片。二话不说,先检查图片信息:疑似问题图片URL:http://file.xxxxxx.com/view/banner/bdb3a244b3ba0774512223bd5442fa46c1ea7fbb.jpg检查文件信息,如图所示:参见,CMYK!例如,我的:到目前为止,保存并重新上传后,ie8和其他显示都正常!既然你说图像的颜色模式有问题,为什么非ie浏览器可以做到这一点?

引子:
 
 
 前段时间 做新版2.0 首页 的时候, 总感觉 新版首页 线上 精彩回顾下的 2张图片颜色怪怪的,当时以为是图片压缩太厉害导致的,由于实在太忙就没太在意!以下 是来自线上 截图:
 
 红色方框 我认为  那2张 怪怪的 图片,大家感受下颜色是否不一样!
 
 ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享第1张
 
问题描述:
 
       今天,测试同学找到我,说新版首页 精彩回顾下方 2张图片 在 ie8下 图片展现不出来了!
 
 
 
开始排查:
 
 通过 浏览器 查看图片 DOM结构, 代码如下:
 
 <img data-original="http://file.xxxx.com/view/banner/09e7286d39013387ff07e0efe7dc8c6ab3a51aef.jpg"  src="http://t.zoukankan.com/http://g.tbcdn.cn/s.gif" alt="" 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地址 首先被 排除掉!
 
 


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

  • 查看文件信息,如图:

ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享第2张
 
 
 
 
看到没,CMYK!
 
猛然一惊,一眼 就瞅到 CMYK,顿时发现了 根本问题所在!于是也明白了 之前总觉得图片颜色怪怪的根本原因了!
 
 
 
先 特写感受下 RGB 和 CMYK 图片差异:
     
     以下2张相同图片,使用 不同颜色模式 视觉差异( 红色方框 的是 用于工业印刷用的),大家感受下:
 
 ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享第3张

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

免责声明:文章转载自《ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇C# MemoryCache 类[转载]开关电源使用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

SCSS提取和懒加载

本本节课讲解在webpack v4中的 Scss 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。Scss 是 Sass 3 引入新的语法,其语法完全兼容 css3,并且继承了 Sass 的强大功能。也就是说,任何标准的 css3 样式表都是具有相同语义的有效的 Scss 文件。另外,Scss 还能识别大部分 css ...

前端网页的懒加载

作为网页内容的一部分,图像和视频通常要消耗很多资源加载。要提高网页应用的性能,如何避免资源浪费在加载图像和视频上就很重要了。但是,很多时候我们都不愿意减少网页上的媒体资源,所以我们经常无从下手。幸运的是,我们有懒加载这个绝招,它可以帮助我们减少加载时间和降低负载,而不在内容上偷工减料。   什么是懒加载? 懒加载是一种在页面加载时延迟加载一些非关键资源的技...

彻底搞懂Spring类加载(注解方式)

单例预加载默认 单例懒加载   正确的加载时机   错误的加载时机 多例懒加载仅支持懒加载 spring beanfactory类高级用法   反射方式加载类 需要注意的问题 通过 Spring 注册的类一共只有三种加载方式! 环境:spring-context 4.2.6jdk 8Eclipse 4.7 最简单的配置 <?xml ve...

2018网易前端实习面试总结

一面: 1.双向绑定的原理,用js原生怎么写? //3种方法的源码 https://github.com/WilberTian/Two-way-data-binding.git 2.解决跨域问题的方法 3.Ajax的过程 4.http如何判断那个浏览器访问 user-agent 5.content-type的类型,你用过那些 application/x-...

vue-router详解

路由(vue-router) 现在的应用都流行SPA应用(single page application) 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个HTML文件的跳转,这个时候网络、性能影响,浏览器会出现不定时间的空白界面,用户体验不好 单页面应用就是用户通过某些操作地址栏url之后,动态的进行不同模板内容的无刷新切换,用户体...

图片懒加载的几种优秀的方式(1)

原生 JS 实现最简单的图片懒加载 懒加载 什么是懒加载 懒加载其实就是延迟加载 是一种对网页性能优化的方式 比如当访问一个页面的时候 优先显示可视区域的图片而不一次性加载所有图片 当需要显示的时候再发送图片请求 避免打开网页时加载过多资源。 为什么要把上面的话分开来写呢,因为上面的话相当简洁,每一句话都是一个操作或者是一个关键点,整体概括了整个图片...