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>