Elements added later All images and text loaded to function. (jQuery or Javascript)

Question

#clickArea click to #contents prepend #loadingText(Loading...) and #contents append HTML-source.
If append HTML-source(All images and text) Load complete to #loadingText(Loading...) is fadeOut.
The code that it is the best in this case?

HTML

<div id="contents">
    <p id="clickArea">Click</p>
</div>

JavaScript(jQuery)

$('p#clickArea').click(function(){

    $('div#contents').prepend('<p id="loadingText">Loading...</p>');

    $('div#contents').append('<div><p class="image"><img src="bigSizeImage01.jpg" alt="" /></p><p class="image"><img src="bigSizeImage02.jpg" alt="" /></p><p class="image"><img src="bigSizeImage03.jpg" alt="" /></p><p class="text">Hello, this is text.</p><p class="text">Hello, this is text.</p></div>');

    $('**********').load(
        function(){
            $('#loadingText').fadeOut(1200);
        }
    );
});

Supplement : $('div#contents').append(HTML-source)

<div>
     <p class="image"><img src="bigSizeImage01.jpg" alt="" /></p>
     <p class="image"><img src="bigSizeImage02.jpg" alt="" /></p>
     <p class="image"><img src="bigSizeImage03.jpg" alt="" /></p>
     <p class="text">Hello, this is text.</p>
     <p class="text">Hello, this is text.</p>
</div>