Jquery ajax get, load ... jquery append ... pros and cons?

Jquery ajax get, load ... jquery append ... pros and cons?

say i have a rather complicated front page containing various different
dom elements. Half of them are "display:none" from the beginning ... than
they appear and disappear again and so on ... (based on users actions).
Problem is that page gets too heavy, cause despite being hidden - element
are still there. so in order to solve this i use jquery ajax (presuming
element is an image):
1 Option - using $.get(): enter code here in php: query to DB => echo
json_encode($query); enter code here in script: $.get("process.php",
function(data) { var items = []; $.each(data, function(key, val) {
items.push('' + val + ''); // enter code hereitems.push('' + key + '' + '
==> ' + val); }); $('', { html: items.join('


') enter code here}).appendTo('#portfolio').hide().fadeIn(1000); },
"json") .done(function() { console.log("success"); enter code
here}).fail(function() { console.log("fail"); });
2 Option - using load(): enter code here $('#portfolio').load('some.html
img').hide().fadeIn(1000); 3 Option - using .append: enter code here
$('#example6').hover( function() { $('#web1').stop(true,
true).append('').fadeIn(5000); }, function() { $('#web1').stop(true, enter
code heretrue).fadeOut(1000).find('img').remove(); return false; });
//////////////////////////////////////////////////////////////////////////////
All three options work well ... First one loads the name of the image file
from db. What does the second one ? Loads a name or a binary blob ? Third
one is not ajax, but does the job as well. What are the pros and cons of
the three ?
Thank you so much in advance. All opinions are welcome!