Load Image On Click With AJAX (jQuery)

Question

I have a mobile site, with all the content on one PHP page, and the pages (or div\'s rather), are swapped with jQuery. I want to speed up the load time, and the bulk of what has

Answer 1

you can use the jquery load to load the image after the dom is completed to load

$(function(){
   $("#imgUser").load("images/testimg.jpg");  
});

Answer 2

Please clarify the question. You want to completely load the content at certain user click or only thje images?

In that case you can do something like this:

HTML

<div class="gif-container">
    <a class="load-gif" href="https://media.giphy.com/media/TGHXd9J6mK6sM/giphy.gif">Load GIF</a>
</div>

JS(using jquery):

$('.load-gif').click(function(e) {
  e.preventDefault();
  var gif_url = $(this).attr('href'),
    $gif_image = $('<img>').attr('src', gif_url),
    $container = $(this).closest('.gif-container'),
    $trigger = $(this);
  $gif_image.load(function() {
    $trigger.remove();
    $container.append($gif_image);
  });
});

Complete fiddle: https://jsfiddle.net/ryyoLgzz/