Question

我正在使用Bootstrap的JavaScript模式插件向我的网站添加对话框 Albyati.com一切看起来都很不错，但是当页面加载时，每个模式内的所有内容都会加载。我正在尝试找出一种方法，使模态内部的内容不会在初始页面加载时加载，而仅在单击模态时才加载。

这里是每个模态内的一个例子。如您所见，我在模式中有很多嵌入式项目（网站上有多个模式），当我的网站加载所有嵌入式iframe和脚本时，这会减慢页面加载时间。

    <div class="portfolio-modal modal fade" id="irma" tabindex="-1" role="dialog" aria-hidden="true">

        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="close-modal">
                    <i class="fas fa-arrow-circle-left fa-2x " data-dismiss="modal"> Back </i>


                </div>
                <div class="container">
                    <div class="row">
                        <div class="modal-body">
                            <div class="title-bar">
                                <div class="col-md-12">
                                    <h2 class="text-center">HURRICANE IRMA SHELTERS PROJECT</h2>
                                    <div class="heading-border"></div>
                                </div>
                            </div>

                            <div class="embed-container">
                                <iframe src="https://rstudio-pubs-static.s3.amazonaws.com/306074_ee60773f13b64a988065207b4858aaba.html" style="border:0">
  </iframe>
                            </div>

                            <div class="project">
                                <p>&nbsp;</p>
                                <p><strong>The Data</strong></p>
                                <p><br />During hurricane Irma, I was stationed in Hawaii but I wanted to help the preparation effort as much as I can, and since the hurricane path was so hard to predict, Florida's emergency services opened many shelters scattered around Florida.</p>
                                <p>After hours of research, I realized there was no one list that includes all the shelters and there was no easy way to find the shelters other than going to Florida's emergency response agency website which provided lists per county and each county has a different website.</p>
                                <p>Long story short, I decided to compile all locations on one list (you can download it here) and create an interactive map that includes all shelters and when the users click on a shelter they will automatically be redirected to Google maps website or app to navigate to the shelter.&nbsp;<a href="https://irp-cdn.multiscreensite.com/5a37bd1f/files/uploaded/FLOpenShelters.xlsx">Download the data here</a></p>
                                <p>&nbsp;</p>
                                <p><strong>The Code</strong></p>
                                <p>There were two major steps implemented to finish coding this map.<br />Get the Geo-location (longitude and latitude) of each shelter by using their physical address. The code below uses R ggmap package and will work on any project just copy the code and run it on your environment. When running the code it will ask for a file to read, make sure to provide a file with a column named addresses.</p>

                                <div class="embed-container">
                                    <iframe src="https://trinket.io/embed/R/30d24b21d2?toggleCode=true" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen="">
  </iframe>
                                </div>

                                <p>&nbsp;</p>
                                <p>The second step of this project is to take the data set created from the first step and utilize plotly, ggmap, and leaflet packages to create the map and link the address to their Google maps location. </p>
                                <p>&nbsp;</p>

                                <div class="embed-container">
                                    <iframe src="https://trinket.io/embed/R/e0fb893c85?toggleCode=true" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen="">
  </iframe>
                                </div>
                            </div>

                            <div style="padding: 25px; text-align: left;">
                                <button class="btn btn-general btn-white" type="button" data-dismiss="modal">
                                      <i class="fa fa-times"></i> Close
                                  </button>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

谢谢

Answer 1

首先保留模态空白。加载文档后，您可以将这些HTML附加到所需的模式。

</html>
<script>
    $( document ).ready(function() {

        // modal 1
        var appendingHtml1 ="<div><iframe>...Your html...</iframe></div>";
        $('#modalId').append(appendingHtml1);

        // modal 2
        var appendingHtml2 ="<div><iframe>...Your html...</iframe></div>";
        $('#modalId').append(appendingHtml2);

    });
</script>

这样，直到所有dom元素都加载完毕后，才会加载不需要的iframe和脚本。

在Modal中引导和嵌入内容

1 个答案: