使用微调器加载iframe

Question

此代码正确加载微调器,但如何在加载完成后隐藏它？

iframe {
    background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Answer 1

作为替代解决方案,您也可以这样做:

    <div id="spinner">
        <div>
             <img src="http://www.ajaxload.info/images/exemples/25.gif" />    
        </div>
    </div>
    <iframe border=0 name=iframe src="http://www.w3schools.com" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('spinner').style.display='none';"></iframe>

将微调器的位置设置为页面容器的样式,使其适当地居中

Answer 2

尝试使用 jQuery：

 $( document ).ready(function() {
    $( "iframe .load" ).hide();
  });

并为加载操作创建第二个 css 类：

    .load{
            background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
            background-repeat: no-repeat;
            background-position: 50% 50%;
            position: absolute;
            width:100%;
            height:100%;
        }

iframe{
         position:relative;
        }

让我知道它是否有效。