css body内有iframe动态给iframe src赋值 iframe内容加载之前loding动画

//gif自己找  样式自己调   两个div  一个给img   一个给文字   为了横向对齐图片和文字
//在给iframe  src赋值的方法里写 隐藏iframe
 <div id="waitPage" style="margin-top: 25%; margin-left: 40%;display:none">
       <div style="display:inline-block;float:left">
             <img style="height: 30px; width: 30px;" src="loading.gif" />
       </div>
       <div style="display:inline-block;float:left;margin-top: 3px;font-size: 16px;">
          页面正在加载中...
       </div>
</div>
<iframe style="width: 100%; height: calc(100% - 43px); border: none; overflow: auto;" src="" id="iframe" onload="Page_wating()"></iframe>

//jq         iframe里写  onload事件   
 function Page_wating() {//页面加载之前gif
           $("[id$='waitPage']").css("display", "none");
            $("[id$='iframe']").css("display", "block");
        }