I'm trying to make it so my high resolution images (jpgs png gifs) that are inside of the modal carousel don't load until the thumbnail is clicked on. Getting lazy load to work on carousels in modals seems extra tricky.
Like a newbie I assumed that functionality was built into Bootstrap 4.5. I've found many similar questions on here as well as other places (I can post them if anyone wants) but I can't get any of them to work, some are outdated, unanswered, or not applicable to Bootstrap 4.5. The most promising one I've found is here: https://github.com/verlok/vanilla-lazyload/issues/451
I like it because it's vanilla js (although I'm not totally comfortable in jquery), but more importantly because it wouldn't require me to drastically rewrite my code, the page is quite large and I'm hoping to be able to simply add a class to the images.
But regardless, this one won't work for me either. Any advice (for a newbie)? I've pasted my (abbreviated) code below, and I've uploaded the files to github: https://github.com/epignosis567/mygithub/tree/main/lazyLoadBootstrap
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- CSS --> <link href="../mystyle.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body id="page-top"> <div class="container-fluid"> <div class="row"> <!-- Media content --> <div class="offset-sm-3 col-sm-9 p-4"> <div class="row d-flex justify-content-center"> <div class="col p-0 text-center" style="width: 100%; max-width: 500px"> <img class="img-fluid pb-3 myPics lazy" data-original="img/01-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="0"/> <img class="img-fluid pb-3 myPics lazy" src="img/02-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="1"/> <img class="img-fluid pb-3 myPics lazy" src="img/03-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="2"/> </div> </div> <!-- begin carousel modal--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true"> <div class="modal-dialog modal modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-body p-1 "> <!-- begin carousel--> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100 lazy" data-original="img/01-4K.png" /> </div> <div class="carousel-item"> <img class="d-block w-100 lazy" src="img/02-4K.png" /> </div> <div class="carousel-item"> <img class="d-block w-100 lazy" src="img/03-4K.png" /> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- end carousel--> </div> </div> </div> </div> <!-- end carousel modal--> </div> <!-- End media content --> </div> </div> <!-- JavaScript --> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="../myscript.js"></script> <!-- Lazy Load script --> <script src="lazyload.min.js"></script> <script> var carouselLazyLoad = new LazyLoad({ elements_selector: ".lazy" }); $('#carousel.carousel .carousel-item').each(function(){ let next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (let i=0;i<2;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } // The following line tells LazyLoad that new elements have been added to the page carouselLazyLoad.update(); }); </script> </body> <script> //carousel script to open to the thumb that was clicked on $('.myPics[data-slide-to]').on('click', function(){ $('#myModal').carousel($(this).data('slide-to')); }); </script> </html> 
没有评论:
发表评论