Javascript 打开“多媒体资料模式”将冻结页面

我们有一个图像库，当点击项目图像时，它以一种模式显示，但当点击此处打开模式时，页面冻结 代码如下：

<?php for($i=0;$i<=count($web->folders)-1;$i++){?>
      <div class="modal fade" id="des_<?php echo $i;?>">
          <div class="modal-dialog modal-xl">
              <div class="modal-content">

                  <!-- Modal Header -->
                  <div class="modal-header">
                      <h4 class="modal-title"><?php echo $web->folders[$i];?></h4>
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>

                  <!-- Modal body -->
                  <div class="modal-body">
                      <div class="container-fluid">
                          <div class="row">
                          <?php foreach($web->content_folder_project($i, "web Developing", "1.jpg") as $key){?>
                              <div class="col-12 text-center mb-3">
                                  <img >
                                  <img data-src="images/projects/web Developing/<?php echo $web->folders[$i]."/".$key;?>" alt=""class="lazy_load img-fluid" loading="lazy"  />
                              </div>
                              <?php } ?>
                          </div>
                      </div>
                  </div>

              </div>
          </div>
      </div>
    <?php }?>

因为您的背景图像“PresentationPattern.png”的大小是11.4mb。
装载时需要更多的时间。
压缩背景图像，然后在问题解决后使用