ページを読み込んだ後に画像を読み込む方法は？

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"); 

あなたは上でこれに関する詳細を読むことができます：あなたの<img>要素のdisplay: hiddenセットはdisplay: noneあるべきapi.jquery.com/load/

Answer 2

。また、JavaScriptを無効にしてページにアクセスしたユーザーは画像が表示されず、永続的な読み込みメッセージだけが表示されることにご注意ください。代わりに、優雅に分解するソリューションを使用する必要があります。このlink

このプラグインをロード画像/背景のURL DOMのロードイベントとウィンドウのloadイベントがトリガされた後

Answer 3

チェック。

最初に、imgタグのsrc属性は空に設定されます。また、htmlには画像パスを含むデータ属性が含まれている必要があります。プラグインは残りの部分を処理します。

画像が読み込まれた後、以下のコードが実行されます。 http://www.w3schools.com/jsref/prop_img_lowsrc.asp：これらのすべては、プラグイン

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