I have a WordPress site where I put the content of a post inside a modal. The page worked great only, because there was so much information on the page, it took a VERY long time to load. So, I decided to populate the modal when the modal gets opened up. I figured out how to use ajax to populate the modal. Only, now, the slideshow in the modal makes it really jumpy. The content was not jumpy when I was loading all of the modals on the page at the same time. I think the slideshow images loaded using lazy load or some I do not know that much about jquery. I am sure there is a solution. Here is the code that populates the modal

<script type='text/javascript'>
$(document).ready(function(){
    $('.userinfo').click(function(){
        var post_id = $(this).data('id');
        $.ajax({
            url: '/ajax/',
            type: 'post',
            data: {post_id: post_id},
            success: function(response){ 
            $('#p111').html(response); 
            }
        });
    });
});
</script>

Here is the code on the wordpress template that generates page /ajax/

<?php
/**
 * Template Name: Ajax 
 */
if(isset($_POST['post_id']) && !empty($_POST['post_id'])){
  $post_id = $_POST['post_id'];
}
?>
    <div class="modal-dialog ">
      <div id="modal_mask"></div>
      <div class="modal-content">
          <div class="modal-body "><div class="container-fluid">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="row">
              <div id="projectcontent" class="col-xs-12 no_pad">
              <?php
              echo '<div class="alignnormal">'.do_shortcode('[metaslider title="'.$post_id.'"]').'</div>';
              $post_object = get_post( $post_id );
              echo $post_object->post_content;
              ?>
              </div>
            </div>
          </div></div>
      </div>
    </div>
<?php
 wp_footer();
exit;
?>

I have worked on this for way tooooooo many hours...ugg