當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML 元素内部添加预加载

發布時間：2023/12/4 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML 元素内部添加预加载小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS：

/*元素內部加載loading*/.innerLoading {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;}.innerLoading * {text-align: center;color: #737782cc;fill: #73777A;font-size: 1em !important;font-family: SimSun,SimHei,Arial !important;}.innerLoading > svg {height: 1.5em;width: 1.5em;margin-right: .5em;animation: turn 1.6s linear infinite;}@keyframes turn {0% {-webkit-transform: rotate(0deg);}25% {-webkit-transform: rotate(90deg);}50% {-webkit-transform: rotate(180deg);}75% {-webkit-transform: rotate(270deg);}100% {-webkit-transform: rotate(360deg);}}

JS：

?完整Demo：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><title> new document </title><meta name="generator" content="editplus" /><meta name="author" content="" /><meta name="keywords" content="" /><meta name="description" content="" /><style>/*元素內部加載loading*/.innerLoading {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;}.innerLoading * {text-align: center;color: #737782cc;fill: #73777A;font-size: 1em !important;font-family: SimSun,SimHei,Arial !important;}.innerLoading > svg {height: 1.5em;width: 1.5em;margin-right: .5em;animation: turn 1.6s linear infinite;}@keyframes turn {0% {-webkit-transform: rotate(0deg);}25% {-webkit-transform: rotate(90deg);}50% {-webkit-transform: rotate(180deg);}75% {-webkit-transform: rotate(270deg);}100% {-webkit-transform: rotate(360deg);}}</style></head> <body><div id="test"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>$(function () { var loading=StartInnerLoading($('#test'),'讓我瞇一會兒');setTimeout(()=>{StopInnerLoading(loading);$('#test').text('獲取數據成功！');$('#test').css({'text-align':'center'});},5000)});function StartInnerLoading(target, info) {var loadInfo = info || "正在加載數據……";var svg = "<svg viewBox=\"0 0 1024 1024\"><path d=\"M910.222 455.111V512H682.667v-56.889h227.555z m-625.778 0V512H56.89v-56.889h227.555z m170.667 227.556H512v227.555h-56.889V682.667z m0-625.778H512v227.555h-56.889V56.89z m341.333 699.733l-39.822 39.822-159.289-159.288 39.823-39.823 159.288 159.29zM369.778 329.956l-39.822 39.822-159.29-159.29 39.823-39.821 159.289 159.289z m-39.822 267.377l39.822 39.823-159.29 159.288-39.821-39.822 159.289-159.289z m426.666-426.666l39.822 39.822-159.288 159.289-39.823-39.822 159.29-159.29z\"></path></svg>";var loading = "<div class='innerLoading'>" + svg + "<span>" + loadInfo + "</span></div>";target.empty();target.append(loading);return target.find('.innerLoading');}function StopInnerLoading(loading) {if (loading) {loading.remove();loading = null;}}</script></body> </html>

顯示效果：

總結

以上是生活随笔為你收集整理的HTML 元素内部添加预加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： VS2019 禁止Web项目停止调试后自
下一篇： JavaScript 清除图片背景颜色