#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>
