vue,angular 等诸多MVVM 前端框架,页面渲染的时候,时常出现 {{}} , 可用这个 loading.js 放到页面解决

/**
 * loading.js
 * H5 loading
 * Author: JonyGuan
 * Date: 2021-08-13
 * 痛点: vue,angular 等诸多MVVM 前端框架,页面渲染的时候,时常出现 {{}}
 * logo_base64 是logo图片的base64,可自行替换自己的logo
 */
var logo_base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTAxM0QwN0RGNDJFMTFFQjg5MUNDOEM5QkI5OTMxOTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTAxM0QwN0VGNDJFMTFFQjg5MUNDOEM5QkI5OTMxOTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFMDEzRDA3QkY0MkUxMUVCODkxQ0M4QzlCQjk5MzE5MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMDEzRDA3Q0Y0MkUxMUVCODkxQ0M4QzlCQjk5MzE5MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pva1OuoAAAyySURBVHja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';
$('head').append('<style>html,body{height:100%;} .loading{  position: fixed; z-index: 9999; top:0;  width: 100%;  height: 100%;  background: #fff;  opacity: 1;}._logo_{  width: 30%;  height: 20%;  margin: 45% auto 0;  display: block;  background: url("'+logo_base64+'") no-repeat center;  background-size: 100% auto;}.spinner {  margin: 0 auto;  width: 30%;  text-align: center;}.spinner > div {  width: 20px;  height: 20px;  background-color: #027cfa;  border-radius: 100%;  display: inline-block;  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;  animation: bouncedelay 1.4s infinite ease-in-out;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;}.spinner .bounce1 {  -webkit-animation-delay: -0.32s;  animation-delay: -0.32s;}.spinner .bounce2 {  -webkit-animation-delay: -0.16s;  animation-delay: -0.16s;}@-webkit-keyframes bouncedelay {  0%, 80%, 100% { -webkit-transform: scale(0.0) }  40% { -webkit-transform: scale(0.8) }}@keyframes bouncedelay {  0%, 80%, 100% {    transform: scale(0.0);    -webkit-transform: scale(0.0);  } 40% {      transform: scale(0.8);      -webkit-transform: scale(0.8);    }}</style>');
$('body').append('<div class="loading"><div class="_logo_"></div><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></div>');
setTimeout(function(){
    $(".loading").css({
        "transition":"all 1.5s",
        "opacity":0,
    })
},1500);
setTimeout(function () {
    $(".loading").remove();
},3000);