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

一种方法是使用AJAX，是的，您可以将每个模式的内容存储到不同的HTML / PHP文件中，然后单击模式以提出AJAX请求，然后将特定的模式内容（html文件）进入页面。

因此，基本上，整个<div class="modal-body"> div将位于不同的HTML文件中，而在模式点击时，您将得到类似的内容

$("the_modal").click(function(){
  $.ajax({url: "modal1.html", success: function(result){
    $("#myModal modal-content").append(result);
  }});
});

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

另一有帮助的是优化图像，减小尺寸和质量。

Answer 2

您可以使用此链接来引用如何在单个引导程序模式中加载动态数据。 https://getbootstrap.com/docs/4.3/components/modal/#varying-modal-content

如果在数据库或JSON文件中有表演数据，则可以传递在上面的示例中在data attribute中单击的表演的ID。

然后使用模式事件show.bs.modal，您可以触发ajax调用，该调用将在.modal-body中填充所需的数据，并在关闭时可以从模式中清除数据。

Answer 3

如果您的主要问题是延迟页面必须加载的图像数量，那么我建议您尝试实现图像的延迟加载。这将提高网站的性能，因为仅当图像显示在视口中时，图像才会加载。

有一个jQuery插件可用于此：jQuery.Lazy()

Answer 4

我建议不要默认加载40张x 600k。您需要考虑移动用户。我将使用图库脚本（我建议使用“照片刷卡”）和对服务器端脚本的请求，该请求返回一个json，该json将仅用于按需创建图库。检查此页面：https://photoswipe.com/documentation/custom-html-in-slides.html

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

4 个答案: