ajax載入提示外掛
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script type="text/javascript" src="jquery-1.11.0.js"></script> </head> <body> <style> #ict-loading-box { position: fixed; width: 120px; height: 120px; top: 45%; left: 50%; margin-top: -60px; margin-left: -60px; background: rgba(255, 255, 255, 0.75); border-radius: 3px; text-align: center; font-size: 14px; color: #666666; -webkit-box-shadow: 0 5px 15px 0 rgba(24, 44, 79, .05); box-shadow: 0 5px 15px 0 rgba(24, 44, 79, .05); display: none; } #ict-loading-box>img { width: 80px; display: block; margin: 0 auto; } </style> <button id="show">點選載入</button> <div id="ict-loading-box"> <img src="ict_loading.svg" /> 載入中 </div> <div id="result"></div> <script type="text/javascript"> function pageLoadTip(time) { var islosading = false; $(document).ajaxStart(function(e) { islosading = true; setTimeout(function() { if(islosading == true) { $("#ict-loading-box").show('fast'); } }, time || 600); }); $(document).ajaxComplete(function(event, xhr, settings) { var status = xhr.status; if(!(status >= 200 && status < 300 || status === 304)) { alert(xhr.statusText); } if(islosading == true) { $("#ict-loading-box").hide('fast'); } islosading = false; }); }; pageLoadTip(); $("#show").click(function() { $("#result").load("微信圖片_20180907131337.jpg"); }); </script> </body> </html>