时间戳

首页 > 解决方案 > Boostrap 4.5 中模态内轮播中的延迟加载/延迟图像

javascript - Boostrap 4.5 中模态内轮播中的延迟加载/延迟图像

问题描述

我正在努力做到这一点，以便在单击缩略图之前不会加载模态轮播内部的高分辨率图像（jpgs png gifs）。让惰性负载在模式中的轮播上工作似乎特别棘手。

像新手一样，我认为 Bootstrap 4.5 中内置了该功能。我在这里和其他地方发现了许多类似的问题（如果有人愿意，我可以发布它们）但我无法让它们中的任何一个工作，有些已经过时，没有答案，或者不适用于 Bootstrap 4.5。我发现的最有前途的一个在这里： https ://github.com/verlok/vanilla-lazyload/issues/451

我喜欢它，因为它是 vanilla js（虽然我对 jquery 并不完全满意），但更重要的是因为它不需要我彻底重写我的代码，页面很大，我希望能够简单为图像添加一个类。

但无论如何，这个对我也不起作用。有什么建议（对于新手）？我在下面粘贴了我的（缩写）代码，并将文件上传到 github：https ://github.com/epignosis567/mygithub/tree/main/lazyLoadBootstrap

<!doctype html>

<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" src="img/01-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="0"/>
                        <img class="img-fluid pb-3 myPics" src="img/02-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="1"/>
                        <img class="img-fluid pb-3 myPics" 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" pause="false" data-ride="false" data-interval="false" >
                          <div class="carousel-inner">
                            <div class="carousel-item active">
                              <img class="d-block w-100 lazy" data-src="img/01-4K.png" />
                            </div>
                            <div class="carousel-item">
                              <img class="d-block w-100 lazy" data-src="img/02-4K.png" />
                            </div>
                            <div class="carousel-item">
                              <img class="d-block w-100 lazy" data-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="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js"></script>
    
<!-- Lazy Load 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>

标签： javascriptjquerytwitter-bootstrapbootstrap-4

解决方案

推荐阅读