I found two similar answers here but both were unsuccessful for my situation (given my limited ability to translate them to my situation). I have a page with a lot of fairly large images and the default method of Bootstrap is to load all the modal images upon page load. The visible html renders fairly quickly (I have a spinner for that) but the additional load time for the hidden modals makes the page impractical. I want the page to load only the visible (non-modal) content to complete the page load (and clear the spinner) and then load each modal's content only when that modal is fired. I've tried every lazyload solution I could find but the images will not render in the modal (the 'data-src' placeholders render but not the 'src' images that are supposed to replace them). I only want to lazyload (or load on 'show.bs.modal') the large images of the modal, those within the 'modal-body' class. I hope this is clear enough.
Sample code:
/* Javascript placed in the head */
<script>
function lazyLoad(){
var $images = $('.lazy_load');
$images.each(function(){
var $img = $(this),
src = $img.attr('data-src');
$img
.on('load',imgLoaded($img[0]))
.attr('src',src);
});
};
$('.modal-body').on("show.bs.modal", function () {
lazyLoad();
};
</script>
/* HTML in the modal section */
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="galleryheader">
<img src="headerimage_1.png" height="77" width="1024">
</div>
<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 lazy_load">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
</div>
<div class="modal-body lazy_load">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
</div>
<div class="modal-body lazy_load">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
</div>
</div>
</div>
</div>
<div class="close-lower" data-dismiss="modal">
<IMG SRC="images/close.jpg" WIDTH="85" HEIGHT="32"></a>
</div>
</div>
</div>
</div>
Lazy Loading Techniques for images. Images on a webpage can be loaded in two ways - using the <img> tag, or using the CSS `background` property. Let's first look at the more common of the two, the <img> tag, and then move on to CSS background images.
You should always use lazy loading for the images below the fold. As we explained, lazy loading will reduce the real and perceived loading time. User experience will benefit from it — and you users will thank you.
Today, lazy loading is widely used in web applications to improve application performance. It helps developers reduce loading times, optimize data usage and improve the user experience. However, overusing lazy loading can affect the application performance negatively.
To lazy load an image, display a lightweight placeholder image, and replace with the real full-size image on scroll. There are several technical approaches to lazy loading images: Inline <img> tags, using JavaScript to populate the tag if image is in viewport. Event handlers such as scroll or resize.
Firstly, put the lazy_load
class on the img
element, not on the parent div
. Secondly the jQuery you need is something like this:
$('.portfolio-modal').on("show.bs.modal", function () {
$('.lazy_load').each(function(){
var img = $(this);
img.attr('src', img.data('src'));
});
});
Notes:
portfolio-modal
class to identify the modal.data()
method to get the image to lazily load.If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With