如何动态加载 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(){

  $.ajax({url: "modal1.html", success: function(result){

    $("#myModal modal-content").append(result);

  }});

});

当然，您可以将数据属性放在模态上并在 AJAX 中使用它们，因此它将适用于整个网站的所有模态。

另一件有很大帮助的事情是优化图像，缩小尺寸，提高质量。