在使用 ajax 加载图像之前加载页脚答案

【问题标题】：Footer loading before images are loaded using ajax在使用 ajax 加载图像之前加载页脚
【发布时间】：2021-11-27 18:49:29
【问题描述】：

我是 ajax 新手，我想先加载图像，然后加载页脚，但是当我尝试使用 ajax 加载图像时，首先加载的是页脚，而不是使图像与页脚重叠的图像。如下图所示。

<!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)
            {
                $.each(data, function(i,pic){
                    $("ul.gallery").append("<li><img src='images/square/"+ pic.path + "' alt='" + pic.title + "'></li>");
                });
            },
            error: function() {
                console.log("Picture cannot be loaded");
            }
        });
    });
    </script>
    <style>
        .b-footer{
            background-color: #274472; 
            color:white;
        }
        .gallery {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .gallery {
            list-style-type: none;
        }

        .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">
        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>

谁能帮我解决这个问题，比如如何在加载图像后稍后加载页脚？正确的代码可以帮助我。

【问题讨论】：

我认为如果您向主容器添加 clearfix 类，您的页脚会很好。原因是您所有的 li 都向左浮动，因此您的页脚将与 main 重叠。 .clearfix::after { 内容："";明确：两者；显示：块； }
非常感谢
我很高兴，我已将我的评论设置为其他任何人的答案。如果它对您有好处，请尝试将其设置为批准的答案。谢谢

标签： javascript html jquery css ajax

【解决方案1】：

在你的网站上试试这个

<!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)
            {
                $.each(data, function(i,pic){
                    $("ul.gallery").append("<li><img src='images/square/"+ pic.path + "' alt='" + pic.title + "'></li>");
                });
            },
            done: function() {
                $("#footer").show();
            },
            error: function() {
                console.log("Picture cannot be loaded");
            }
        });
    });
    </script>
    <style>
        .b-footer{
            background-color: #274472; 
            color:white;
        }
        .gallery {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .gallery {
            list-style-type: none;
        }

        .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" id="footer" style="display: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>

【讨论】：

这不显示页脚
有人能帮帮我吗？

【解决方案2】：

简单的答案是删除 .gallery li 的现有样式并添加以下内容

.gallery li {
    display: inline-block;
    padding: 30px;
    position: relative;
    overflow: hidden; }

【讨论】：

这不起作用。

【解决方案3】：

如果您向主容器添加 clearfix 类，我认为您的页脚会很好。原因是你所有的 li 都是向左浮动的，所以你的页脚会与主容器重叠。

.clearfix::after { 
    content: ""; 
    clear: both; 
    display: block; 
}

摘要

对于那些不知道的人来说，clearfix 是一个 CSS hack，它解决了一个下一个堆叠两个浮动元素时发生的持久性错误对彼此。当元素以这种方式对齐时，父级容器的高度为 0，它很容易对布局。

https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/

【讨论】：

您能否详细解释一下问题所在以及这段代码的作用？
@Coderash 我已经编辑了我的答案以包含解释和参考链接。希望对你有帮助
我已经验证了你的答案。如果你喜欢这个问题。请投票，因为我对此完全陌生。

【解决方案4】：

这不是 ajax 问题，您只需在此处添加适当的页脚 CSS 即可解决您的问题，只需将页脚 CSS 替换为此

.b-footer{
                background-color: #274472; 
                color:white;
                position: absolute;
                 bottom: 0;
                width: 100%;
            }

<!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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
         $("ul.gallery").append("<li><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtfeR2gr_Z2U5rNiTKieMXMM9ZY96GbKUQQg&usqp=CAU'></li>");
        $.ajax({
            url: "js/data.json",
            dataType: "json",
            success: function(data)
            {
              
                   
             
            },
            error: function() {
                 
            }
        });
    });
    </script>
    <style>
        .b-footer{
            background-color: #274472; 
            color:white;
            position: absolute;
                bottom: 0;
                   width: 100%;
        }
        .gallery {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .gallery {
            list-style-type: none;
        }

        .gallery li{
            float: left;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        .clearfix::after { 
    content: ""; 
    clear: both; 
    display: block; 
}
    </style>
  </head>
  <body>
    <main class="container">     
        <ul class="gallery">
        </ul>
    </main>
    <footer class="text-center p-4 b-footer">
        This is a footer
        <div id="footer">
            <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>
  </body>
</html>

注意：-正确的结果见整页。

【讨论】：