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 to be loaded are images on each persons bio. I would like to use jQuery to only load the persons image when their bio is navigated to. I'm guessing I need to use AJAX because we can't rely on a page refresh. Any pointers? Thanks!

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/