在使用 ajax 加載圖像之前加載頁腳
[英]Footer loading before images are loaded using ajax
問題描述
我是 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>
誰能幫我解決這個問題，比如如何在加載圖像后稍后加載頁腳？ 正確的代碼可以幫助我。
4 個解決方案
解決方案1
2 2021-10-08 07:38:38
這不是 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>
注意：-要獲得正確的結果，請參閱整頁。
解決方案2
1 已采納 2021-10-07 18:20:06
如果您向主容器添加 clearfix class，我認為您的頁腳會很好。 原因是您所有的 li 都向左浮動，因此您的頁腳將與主容器重疊。
.clearfix::after {
content: "";
clear: both;
display: block;
}
概括
對於那些不知道的人，clearfix 是一個 CSS hack，它解決了當兩個浮動元素彼此相鄰堆疊時發生的持續性錯誤。 當元素以這種方式對齊時，父容器的高度最終為 0，並且很容易對布局造成嚴重破壞。
https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/
解決方案3
0 2021-10-07 17:12:16
在您的網站上試試這個
<,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>
解決方案4
0 2021-10-07 17:52:49
簡單的答案是刪除現有的 styles for.gallery li 並添加以下內容
.gallery li {
display: inline-block;
padding: 30px;
position: relative;
overflow: hidden; }
使用AJAX加載的iframe代碼未加載
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.