How to load images after page loaded?
<p>I have this code:</p>

<pre><code>            &lt;script type="text/javascript"&gt;
                $(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();
                    };
                  });

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

<p>But this not work. I want to display all empty pages with text "Loading..." and after load image page insert it to the relevant img element.</p>

<p>Sorry for my terrible english...</p>
