opening gallery modal freezes the page

Question

We have a gallery of images which displayed in a modal when clicking on the project image but the page is freezing when clicking to open the modal here thinknavy projects here is the code:

<?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 }?>

Answer 1

Because Your background image "presentationPattren.png" it's size is 11.4mb. it take more time in load. compress your background image then use after your problem is solve.