如何在頁面加載後加載圖像？

Question

我有這樣的代碼：

  <script type="text/javascript"> 
       $(document).ready(function(){ 
        var id = 'i1'; 
        var image = new Image(); 
        image.src = 'http://url_to_my_image'; 
        image.onload = function(){ 
         $('#m' + id).attr('src',image.src); 
         $('#m' + id).show(); 
        }; 
        }); 

      </script> 
      <ul style="list-style: none; margin: 0px; padding: 0px;"> 
       <li id="i1" style="display: inline;"> 
        <div style="background-color: #bbb; width:768px;height:1024px;"><div style="margin-top:505px; margin-left: 370px; font-size: 24px; font-family: Arial, sans-serif; color: #333;">Load...</div></div> 
        <img src="" id="#mi1" style="display: hidden;" /> 
       </li> 
      </ul> 

但這行不通。我想要顯示所有帶有文本「Loading ...」的空白頁面，並且在加載圖像頁面後將其插入相關的img元素。

對不起，我糟糕的英國......

Answer 1

試試這個：

$("#m"+id).load("//your link"); 

你可以閱讀更多關於這一點：api.jquery.com/load/

Answer 2

的display: hidden設置你的<img>元素應該是display: none。另外，請記住，禁用JavaScript訪問您的網頁的用戶永遠不會看到圖片，只能看到永久性加載消息。您應該使用優雅的降級解決方案。

Answer 3

入住這link

這個插件加載圖像/背景的DOM加載事件和窗口加載事件後的URL被觸發。

最初，img標籤的src屬性將被設置爲空。而且html應該包含一個數據屬性，它將包含圖像路徑。該插件將照顧其餘的事情。

加載圖片後，下面的代碼將被執行。 http://www.w3schools.com/jsref/prop_img_lowsrc.asp：所有這些都是由插件

$('img').attr('src', < data URL with the img path >)