Я новичок в 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>

enter image description here

Может ли кто-нибудь помочь мне решить эту проблему, например, как сделать так, чтобы нижний колонтитул загружался позже после загрузки изображений? Правильный код может мне помочь.

1
Coderash 7 Окт 2021 в 20:09

4 ответа

Лучший ответ

Я думаю, что ваш нижний колонтитул будет в порядке, если вы добавите класс clearfix в свой основной контейнер. Причина в том, что все ваши li остаются плавающими, поэтому нижний колонтитул будет перекрывать основной контейнер.

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

РЕЗЮМЕ

Для тех, кто не знает, clearfix - это взлом CSS, который решает постоянную ошибку, которая возникает, когда два плавающих элемента располагаются рядом друг с другом. Когда элементы выровнены таким образом, родительский контейнер имеет высоту 0, и это может легко нанести ущерб макету.

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

1
slashroot 8 Окт 2021 в 07:45

Это не проблема с 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>

Примечание: - правильные результаты см. на всей странице.

1
Neeraj 8 Окт 2021 в 07:38

Попробуйте это на своем веб-сайте

<!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>
0
ŕ̷͉ge̸ḓ̶̅i̷t 7 Окт 2021 в 17:12

Простой ответ - удалить существующие стили для .gallery li и добавить ниже

.gallery li {
    display: inline-block;
    padding: 30px;
    position: relative;
    overflow: hidden; }
0
Naveen Setty 7 Окт 2021 в 17:52