最近公司有个客户的网站用手机safari打开出现背景图片错乱,本来应该显示A图片的却显示B图片,网速越慢的情况下越容易出现这种问题,悲催的是这种情况只在iPhone 6上出现,并且不是一直这样,多刷新几次就正常了,用安卓测试一切正常,pc端显示也一切正常。
经过一番努力发现这种现象只在ios 8 版本系统下才会出现,从相关资料上看到说是http pipeline造成的,是ios 8的一个bug,解决办法有两个
1、<meta http-equiv="expires" content="0">
加上这句,强制网页每次都重新下载而不是用缓存,这样做直接后果就是大量消耗流量,如果网页访问量不大可以这么搞
2、在服务器端做设置,避开 iOS8 的系统bug,这个相关资料的说法是阿里的CDN可以避开这个问题,到网上找了几个图片比较多的案例,测试下来基本上都是阿里CDN,看来这个方法应该是可行的
网上也提到了另一种解决办法,在html文件中尽量不要写img标签,统一放到css中,并且在图片后加上版本号,例如下面这段代码
.img_logo { background: url(../images/logo.png?v=20150427) no-repeat; width: 175px; height: 49px; display: block; }