I have some problem with loading images. This is a code:

1. $(document).ready(function(){
2.     $('.image-box').each(function(){
3.         $(this).loadImage();
4.     });
5.    
6. });
7.    
8. (function($){
9.     $.fn.loadImage = function(){                 
10.         $(this).addClass('loading');
11.         $self = $(this);
12.         var img = new Image();
13.        
14.         $(img).load(function(){
15.             $(this).css('display', 'none');
16.             $self.removeClass('loading').append(this);
17.             $(this).fadeIn();
18.         }).attr({'src' : $self.find('input:hidden').val() });
19.     };
20.    
21. })(jQuery);

When I run this plugin I receive following html result:

1. <ul>
2.         <li>
3.                 <span class="image-box loading">
4.                         <input name="img-name-hidden" value="100.jpg" type="hidden">
5.                 </span>
6.         </li>
7.         <li>
8.                 <span class="image-box loading">
9.                         <input name="img-name-hidden" value="200.jpg" type="hidden">
10.                 </span>
11.         </li>
12.         <li>
13.                 <span class="image-box loading">
14.                         <input name="img-name-hidden" value="300.jpg" type="hidden">
15.                         <img style="" src="100.jpg">
16.                         <img style="" src="200.jpg">
17.                         <img style="" src="300.jpg">
18.                 </span>
19.         </li>
20. </ul>
    

My question:
Why images were appended to last <li> element? Have some ideas?