主页 / coding / 问题 / 79315446
Accepted
Alex
Asked: 2024-12-29 18:56:17 +0800 CST

打开模式按钮 - 一次加载一张图片

  • 772

我已经编写了此页面（使用 DataTables、PHP 和 Bootstrap 5.3）。如您所见，在表格的每一行中，我放置了一个按钮，该按钮可触发一个模式，其中包含一个响应图像（所有图像都包含在同一文件夹中）。一切正常。

当我加载页面时，需要一分钟左右才能完成加载，如果我在加载完成之前单击按钮，模式对话框不会显示图像。我怀疑所有图像（约 30 张）都是在打开网页时加载的。

如果是这样，有什么办法可以防止这种情况发生吗？我猜最好只在单击相应按钮时才加载每个单独的图像。

image

1 个回答

  1. Best Answer

    仅供参考 – 最好在问题中包含一个代码片段来演示您的问题，而不是链接到您的网站。如果您的 URL 发生变化，那么可能遇到类似问题的人将无法看到您遇到的问题。

    为了延迟加载图像直到需要它们时，您可以使用将加载属性设置为lazy。

    为了加快图像下载时间，请将图像大小调整为显示尺寸（图像 14_malga-bes-baldo.jpg 可以从 4333x3071 缩小到 466x330）并使用较新的格式，例如 AVIF 或 WebP。

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img src="https://placehold.co/600x400/webp" class="img-fluid" loading="lazy" width="600" height="400" alt="placeholder">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    • 1

相关问题