如何动态加载 Modal 的内容（Bootstrap 4）

Question

我正在建立一个包含丰富图像的网站。我将它设计为一个登陆页面：所有内容都必须在主 HTML 页面上，其他页面没有流动，实际上只有 index.html。

这将是一个剧院的官方网站，图片都与他们的节目有关。要估计图像数量：

40 显示每场近 40 张图片（每张图片约 600kb）

几乎1gb 的图片在同一页面中！

每个节目都用一个图像表示，当您单击“显示图像”时，会打开一个模式，以网格形式显示相关图片及其相关信息。

我正在使用 Bootstrap 4、Jquery 和 CSS。

问题是：如果我将所有模态（其中包含图片）添加到 HTML 页面，我的网站会变得非常懒惰，并且 ** 无法正确加载**。

我正在寻找一种每次点击节目时动态加载图片的方法，避免从一开始就加载带有所有图片的 Dom。

我已经尝试过使用Jquery 注入，但是当模态打开和模态关闭时很难处理，我认为这不是一种正确而严格的编码方式。

我正在考虑对图像进行PHP 服务器操作。Php 详细说明并最小化图像以制作缩略图，因此当在网格中看到图像时，它们不是全尺寸，只有当单击图像时，它们才会以全尺寸显示（使用 lightbox.js）。但是我完全是 PHP 的菜鸟，我没有找到简单的教程。

我愿意接受您认为我可以实施的任何解决方案，主要是那些关心 SEO 优化和更快的客户端加载时间的人！

<!-- MODAL EXAMPLE -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog modal-full " data-dismiss="modal">

    <div class="modal-content mx-auto">

      <div class="modal-body">

        <div class="column mx-auto">

          <div class="sidebar-box">

            <h2 class="title">SHOW TITLE</h2>

            <h2 class="subtitle"> SHOW SUBTITLE</h2>

            <p class="middle">MIDDLE INFORMATION</p>

            <p class="description">SHOW DESCRIPTION</p>

          </div>

        </div>

        <div class="column mx-auto">

          <!-- THERE WILL BE ALL THE IMAGES IN A GRID-->

          <div class="row justify-content-center">

            <a href="stages/alesi/alesi1.JPG" data-title="Fotografia ©" data-lightbox="alesi">

              <img src="stages/alesi/alesi1.JPG" alt="" />

            </a>

            <a href="stages/alesi/alesi2.JPG" data-title="Fotografia ©" data-lightbox="alesi">

              <img src="stages/alesi/alesi2.JPG" alt="" />

            </a>

            <a href="stages/alesi/alesi3.JPG" data-title="Fotografia ©" data-lightbox="alesi">

              <img src="stages/alesi/alesi3.JPG" alt="" />

            </a>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

Answer 1

如果您的主要问题是必须加载的图像数量会延迟您的页面，那么我建议您尝试实现图像延迟加载。这将提高您网站的性能，因为您的图像仅在它们显示在视口中时才会加载。您可以使用一个 jQuery 插件：jQuery.Lazy()

Answer 2

一种方法是使用 AJAX，是的，您可以将每个模态的内容放入不同的 HTML/PHP 文件中，然后单击模态以发出 AJAX 请求，并将特定的模态内容（html 文件）放入这页纸。因此，基本上，您将<div class="modal-body">在不同的 HTML 文件中拥有整个div，并且在模态单击时，您将拥有类似的内容$("the_modal").click(function(){&nbsp; $.ajax({url: "modal1.html", success: function(result){&nbsp; &nbsp; $("#myModal modal-content").append(result);&nbsp; }});});当然，您可以将数据属性放在模态上并在 AJAX 中使用它们，因此它将适用于整个网站的所有模态。另一件有很大帮助的事情是优化图像，缩小尺寸，提高质量。