使用微調器加載iframe

該代碼正確加載微調器，但是如何在加載完成後將其隱藏？使用微調器加載iframe

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

來源

2016-01-10 user3387046

你需要的JavaScript。 jQuery with'$（document）.ready（）' – Phiter

更正 - 此代碼在iframe的背景中附加一個加載圖像，它不會「加載」微調器。你需要微調器與iframe分離，然後使用JS，真正加載它並將其刪除 – LOTUSMS

嘗試的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; 
     }

讓我知道，如果它的工作原理。

來源

2016-01-10 17:12:42 osanger

作爲替代解決方案，你可以這樣做，以及：

<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>

風格微調的絕對頁面容器的位置居中appropriatedly

來源

2016-01-10 17:26:20 LOTUSMS

你可以聽時，iframe是加載，然後在iframe上放置一個類，將背景圖像設置爲無。

... 。 iframe.onload = function（）{ 。 //刪除微調器。 }; ...

對不起，我簡單的回答，但我在電話ATM :)

來源

2016-01-11 17:14:17

使用微調器加載iframe

回答

相關問題