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：

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;}
}

完整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 元素内部添加预加载相关推荐

苹果cms怎么做html缓存广告,苹果cms如何添加播放器预加载和缓冲广告
这篇文章主要为大家详细介绍了苹果cms如何添加播放器预加载和缓冲广告,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 1,来到系统后台>>系统> ...
苹果cms如何添加播放器预加载和缓冲广告
1,来到系统后台>>系统>>播放器参数设置可以看到添加预加载和缓冲广告的输入框,文件格式为html 自己写一个html的网页上传到网站进行调用即可,链接前面不要加http或 ...
前端女娲补天 HTML（二）什么是懒加载，什么是预加载
什么是懒加载懒加载可以将页面上的图片src设置为空,真实路径放在data-original属性中,在图片进入可视区域后再将src设置为data-original的值. 具体实现在DOM中获取所有懒 ...
图片预加载和懒加载的多种方法
图片预加载和懒加载图片懒加载在渲染页面的时候,先将图片用一张默认图片代替,当图片到达浏览器可视区域时,才显示真实的图片. 这样的好处是,可以减缓服务器负担,加快初始界面的渲染速度. 实现方式: 使 ...
vue项目中使用大图片提前预加载处理方案
目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 方案一项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程序 ...
vue中的图片预加载
1.首先添加一个loading加载页,给一张加载的图片 <div class="load" v-if="load"><img src=&quo ...
ios 微信浏览器预加载_小程序页面预加载技术
lightning-load-project 集成方式看不效果览图的话,请看博客 https://blog.csdn.net/sinat_27612147/article/details/80802 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞集成篇
小程序性能优化之页面预加载方案集成篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725 前言之前看到一篇文 ...
Metrics_collector还没有添加到共享预加载库(shared_preload_libraries)中
gpcc踩坑本文最大的锅,最大的坑来了安装完成之后会报以下错误!你可以完全忽略错误的解决过程直接跳到最后! Metrics_collector还没有添加到共享预加载库(shared_preload ...

HTML 元素内部添加预加载

HTML 元素内部添加预加载相关推荐

最新文章

热门文章