1. onload 事件在苹果手机系统 10.2 以上系统才支持
( 如: iPhone 6 及以下的机型, 如果没有升级过系统是不支持 onload 事件的 )
2. 问题描述:
在微信公众号里,本来想给页面加一个启动图,当网页加载完成的时候 (onload 事件) 去移除启动图,这样给用户一个过渡. 但是加过后没几天就有部分苹果手机用户反映进不去,一直卡在加载图上. 最后经过排查发现问题是 低版本苹果系统的 iPhone 不支持 onload 事件,
onload 支持情况: IOS 10.2 以上, 安卓 4.4 以上
onload 所有浏览器支持情况
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title> 测试 </title>
</head>
<body onload="hideLoading()">
<img src="a.png" id="img1">
<script>
//函数
function hideLoading() {
var loadImg = document.getElementById("img1");
document.body.removeChild(loadImg);
}
</script>
</body>
3. 解决办法:
(1). 让 iPhone 用户升级到最新版本. (当然是不现实的)
(2). 使用 window.navigator.userAgent 来判断是不是苹果手机,如果是手动使用 js 移除加载图,不是就让浏览器自动调用 onload 指定的函数移除加载图.(因为苹果速度很快,除了第一次基本上看不到加载图的)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>解决办法 (简单)<title>
</head>
<body onload="hideLoading()">
<img src="a.png" id="img1">
<sctipt>
var loadImg = document.getElementById("img1");
var ua = window.navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
//是微信,和苹果端,手动改移除加载图
if (isWeixin && isIos) {
hideLoading();
}
//加载完成,自动移除加载图
function hideLoading() {
document.body.removeChild(loadImg);
}
</script>
</body>
</html>
