使用Ajax加载图片时页脚先加载出现重叠问题如何解决？

问题根源 #

你遇到的重叠问题核心有两个：

1. .gallery li设置了float: left浮动属性，但父容器.gallery没有做清除浮动处理，导致父容器高度塌陷，外层的main标签无法被图片内容撑开，页脚会直接定位到页面上方和图片重叠。
2. Ajax请求仅能保证图片DOM节点插入页面，图片本身的资源加载是异步的，即便DOM插入完成，图片未加载完成时高度不确定，也会影响页脚的位置判断。

修改说明 #

• 新增.gallery清除浮动样式，从根源解决高度塌陷问题
• 给页脚默认添加bootstrap内置的d-none类隐藏，避免页面加载初期就显示
• 新增图片加载监听逻辑，所有图片处理完成（加载成功/失败均计数）后自动显示页脚

完整可运行代码 #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />     
    <title>Image Gallery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $.ajax({
            url: "js/data.json",
            dataType: "json",
            success: function(data)
            {
                let totalImg = data.length;
                let loadedImg = 0;
                $.each(data, function(i,pic){
                    // 生成图片节点并监听加载状态
                    const $img = $("<img>", {
                        src: 'images/square/'+ pic.path,
                        alt: pic.title
                    });
                    const $li = $("<li>").append($img);
                    $("ul.gallery").append($li);
                    
                    // 图片加载完成或失败都计数
                    $img.on('load error', function(){
                        loadedImg++;
                        if(loadedImg === totalImg) {
                            // 所有图片处理完成后显示页脚
                            $("footer").removeClass('d-none');
                        }
                    })
                });
            },
            error: function() {
                console.log("Picture cannot be loaded");
                // 请求失败也显示页脚，避免页脚永远隐藏
                $("footer").removeClass('d-none');
            }
        });
    });
    </script>
    <style>
        .b-footer{
            background-color: #274472; 
            color:white;
        }
        .gallery {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        /* 新增清除浮动样式 */
        .gallery::after {
            content: "";
            display: table;
            clear: both;
        }
        .gallery li{
            float: left;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
    </style>
  </head>
  <body>
    <main class="container">     
        <ul class="gallery">
        </ul>
    </main>
    <!-- 给页脚添加默认隐藏类 -->
    <footer class="text-center p-4 b-footer d-none">
        This is a footer
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">About</a></li>
                    <li class="breadcrumb-item"><a href="#">Contact</a></li>
                    <li class="breadcrumb-item"><a href="#">Browse</a></li>
                </ol>
            </nav>
        </div>
    </footer> 
  </body>
</html>

内容的提问来源于stack exchange，提问作者Coderash