Hello ~

I'm trying to do something that should be pretty basic but I can't get it to work no matter what I do. I simply want the hidden modal images to NOT LOAD with the DOM but only load when a particular modal trigger has been selected. This will greatly decrease the page-load time on a page with a large number of modals involved. Currently the page-load time is too long. So, load the visible page, click on a thumbnail image to launch the modal, then the larger series of images loads (lazy loads) to the modal.

I've tried various jquery methods using a placeholder for the 'src' and a 'data-src' or 'data-original' tag for the image to be loaded. I can get the placeholder 'src' images to load but they are not being replaced with the 'data-src / data-original' images. I've tried the 'jquery.lazyload.js plug-in. I'm really at a loss as to why this isn't working. The browser console confirms no script errors, unexpected end-of-files or broken links. I feel like something very simple is getting in the way and I am missing it. Has anyone achieved this or can suggest a method?

Tried and not working:
-----------------------------------
// HTML

<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-sm-5 portfolio-item">
<a href="#portfolioModal8" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x">Caption</i>
</div>
</div>
<img src="thumbnailimage.jpg"></a>
</div>
</div>
</div>
</section>

<div class="portfolio-modal modal fade" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div><div class="container">
<div class="row">
<div>
<div class="modal-body">
<img class="lazy" data-original="largeimage.jpg" height="585" width="885"></div>
<div class="modal-body">
<img class="lazy" data-original="largeimage.jpg" height="585" width="885"></div>
<div class="modal-body">
<img class="lazy" data-original="largeimage.jpg" height="585" width="885"></div>
</div>
</div>
</div>


//Javascript

$('.portfolio-modal').on("show.bs.modal", function () {
$("img.lazy").lazyload();
});
-----------------------------------
// HTML

section id="portfolio">
<div class="container">
<div class="row">
<div class="col-sm-5 portfolio-item">
<a href="#portfolioModal8" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x">Caption</i>
</div>
</div>
<img src="thumbnailimage.jpg"></a>
</div>
</div>
</div>
</section>

<div class="portfolio-modal modal fade" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div><div class="container">
<div class="row">
<div>
<div class="modal-body">
<img class="lazy_load" data-src="largeimage.jpg" height="585" width="885"></div>
<div class="modal-body">
<img class="lazy_load" data-src="largeimage.jpg" height="585" width="885"></div>
<div class="modal-body">
<img class="lazy_load" data-src="largeimage.jpg" height="585" width="885"></div>
</div>
</div>
</div>
</div>
</div>

//Javascript

$('.portfolio-modal').on("show.bs.modal", function () {
$('.lazy_load').each(function(){
var img = $(this);
img.attr('src', img.data('src'));
});
});
-----------------------------------

// HTML

section id="portfolio">
<div class="container">
<div class="row">
<div class="col-sm-5 portfolio-item">
<a href="#portfolioModal8" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x">Caption</i>
</div>
</div>
<img src="thumbnailimage.jpg"></a>
</div>
</div>
</div>
</section>

<div class="portfolio-modal modal fade" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div><div class="container">
<div class="row">
<div>
<div class="modal-body">
<img class="lazy" data-src="largeimage.jpg" height="585" width="885"></div>
<div class="modal-body">
<img class="lazy" data-src="largeimage.jpg" height="585" width="885"></div>
<div class="modal-body">
<img class="lazy" data-src="largeimage.jpg" height="585" width="885"></div>
</div>
</div>
</div>
</div>
</div>

//CSS

img.lazy {
display: block;
}

//Javascript

$('.portfolio-item').click(function() {
$('.lazy').lazy({
bind: "event",
delay: 0
});
});
-----------------------------------

...and a few dozen other things.