loopin in .load in jquery
<p>why load() function loops almost 23 times when i have only eight elements with .image class</p>

<pre><code>$(document).ready(function()
{
    var i=0;

    $('.image').load(function(){
    console.log(i++);
    });
});
</code></pre>

<p>my html is</p>

<pre><code>&lt;div class="pel homepics"&gt;
    &lt;div class="left i1" &gt;&lt;a href="#" &gt;&lt;img class="image" src="image1.png"/&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="left i1" &gt;&lt;a href="#" &gt;&lt;img class="image" src="image1.png"/&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="left i1" &gt;&lt;a href="#" &gt;&lt;img class="image" src="image1.png"/&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="left i1" &gt;&lt;a href="#" &gt;&lt;img class="image" src="image1.png"/&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="left i1" &gt;&lt;a href="#" &gt;&lt;img class="image" src="image1.png"/&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="left i1" &gt;&lt;a href="#" &gt;&lt;img class="image" src="image1.png"/&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="left i1" &gt;&lt;a href="#" &gt;&lt;img class="image" src="image1.png"/&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="left i1" &gt;&lt;a href="#" &gt;&lt;img class="image" src="image1.png"/&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
