Ajax loading progress bar and ajax loading progress bar

Ajax loading progress bar and ajax loading progress bar

The running effect can be displayed on both pc and mobile devices. The call method is simple and the call starts: loading. baosight. showPageLoadingMsg (false). false indicates that loading is not realistic. true indicates loading. call: loading. baosight. hidePageLoadingMsg () has two files: one is a js file and the other is a css file. don't forget to introduce jquery. js Oh. for more information, add the QQ group: 106320003

Css file

#_loadMsg{    display: inline-block;    width: 100%;    text-align: center;    line-height: 45;    padding-left: 20px;    display : none;}#_loading_div {     vertical-align: middle;    display: inline-block;    width: 100%;    height: 100%;    margin: 0 auto;    text-align: center;    position: absolute;    z-index: 3;    line-height: 40;    opacity: 0.5;    display : none;    background: #CCCCCC;}#_loading_div span {    display: inline-block;    width: 10px;    height: 40px;    animation-name: scale;    -webkit-animation-name: scale;    -moz-animation-name: scale;    -ms-animation-name: scale;    -o-animation-name: scale;    animation-duration: 1.2s;    -webkit-animation-duration: 1.2s;    -moz-animation-duration: 1.2s;    -ms-animation-duration: 1.2s;    -o-animation-duration: 1.2s;    animation-iteration-count: infinite;    -webkit-animation-iteration-count: infinite;    -moz-animation-iteration-count: infinite;    -ms-animation-iteration-count: infinite;    -o-animation-iteration-count: infinite;}span.item-1 {  background: #2ecc71;}span.item-2 {  background: #3498db;}span.item-3 {  background: #9b59b6;}span.item-4 {  background: #e67e22;}span.item-5 {  background: #c0392b;}span.item-6 {  background: #e74c3c;}span.item-7 {  background: #e74c8c;}.item-1 {    animation-delay: -1s;    -webkit-animation-delay: -1s;    -moz-animation-delay: -1s;    -ms-animation-delay: -1s;    -o-animation-delay: -1s;}.item-2 {    animation-delay: -0.9s;    -webkit-animation-delay: -0.9s;    -moz-animation-delay: -0.9s;    -ms-animation-delay: -0.9s;    -o-animation-delay: -0.9s;}.item-3 {    animation-delay: -0.8s;    -webkit-animation-delay: -0.8s;    -moz-animation-delay: -0.8s;    -ms-animation-delay: -0.8s;    -o-animation-delay: -0.8s;}.item-4 {    animation-delay: -0.7s;    -webkit-animation-delay: -0.7s;    -moz-animation-delay: -0.7s;    -ms-animation-delay: -0.7s;    -o-animation-delay: -0.7s;}.item-5 {    animation-delay: -0.6s;    -webkit-animation-delay: -0.6s;    -moz-animation-delay: -0.6s;    -ms-animation-delay: -0.6s;    -o-animation-delay: -0.6s;}.item-6 {    animation-delay: -0.5s;    -webkit-animation-delay: -0.5s;    -moz-animation-delay: -0.5s;    -ms-animation-delay: -0.5s;    -o-animation-delay: -0.5s;}.item-7 {    animation-delay: -0.4s;    -webkit-animation-delay: -0.4s;    -moz-animation-delay: -0.4s;    -ms-animation-delay: -0.4s;    -o-animation-delay: -0.4s;}@-webkit-keyframes scale {  0%, 40%, 100% {    -moz-transform: scaleY(0.2);    -ms-transform: scaleY(0.2);    -o-transform: scaleY(0.2);    -webkit-transform: scaleY(0.2);    transform: scaleY(0.2);  }  20%, 60% {    -moz-transform: scaleY(1);    -ms-transform: scaleY(1);    -o-transform: scaleY(1);    -webkit-transform: scaleY(1);    transform: scaleY(1);  }}@-moz-keyframes scale {  0%, 40%, 100% {    -moz-transform: scaleY(0.2);    -ms-transform: scaleY(0.2);    -o-transform: scaleY(0.2);    -webkit-transform: scaleY(0.2);    transform: scaleY(0.2);  }  20%, 60% {    -moz-transform: scaleY(1);    -ms-transform: scaleY(1);    -o-transform: scaleY(1);    -webkit-transform: scaleY(1);    transform: scaleY(1);  }}@-ms-keyframes scale {  0%, 40%, 100% {    -moz-transform: scaleY(0.2);    -ms-transform: scaleY(0.2);    -o-transform: scaleY(0.2);    -webkit-transform: scaleY(0.2);    transform: scaleY(0.2);  }  20%, 60% {    -moz-transform: scaleY(1);    -ms-transform: scaleY(1);    -o-transform: scaleY(1);    -webkit-transform: scaleY(1);    transform: scaleY(1);  }}@keyframes scale {  0%, 40%, 100% {    -moz-transform: scaleY(0.2);    -ms-transform: scaleY(0.2);    -o-transform: scaleY(0.2);    -webkit-transform: scaleY(0.2);    transform: scaleY(0.2);  }  20%, 60% {    -moz-transform: scaleY(1);    -ms-transform: scaleY(1);    -o-transform: scaleY(1);    -webkit-transform: scaleY(1);    transform: scaleY(1);  }}

 

Js files

Var loading = {baosight: {showPageLoadingMsg: function (showMessage) {if ($ ("# _ loading_div "). length = 0) {$ ("body "). append ('<div id = "_ loading_div"> <span class = "item-1"> </span> <span class = "item-2"> </span> <span class = "item-3"> </span> <span class = "item-4"> </span> <span class = "item-5"> </ span> <span class = "item-6"> </span> <span class = "item-7"> </span> </div> ');} if ($ ("# _ loadMsg "). length = 0) {$ ("body "). append ('<div id = "_ loadMsg"> loading. Please wait ...... </div> ');} if (showMessage = true | showMessage = "true") {$ ("# _ loadMsg "). show () ;}$ ("# _ loading_div "). show () ;}, hidePageLoadingMsg: function () {$ ("# _ loading_div "). hide (); $ ("# _ loadMsg "). hide ();}}}

 

Ajax loading progress bar

Never seen
I am afraid there is no better way to determine the progress manually based on the programming logic.
<Script>
Function setProcess (n)
{// Display progress bar script
}
SetProcess (10) // set progress bar 10%
</Script>
<Html>
....
<Script>
SetProcess (30) // set progress bar 30%
</Script>
....
<Script>
SetProcess (50) // set progress bar 50%
</Script>
....
<Script>
SetProcess (70) // set progress bar 70%
</Script>
....
<Script>
SetProcess (90) // set progress bar 90%
</Script>
.....
<Script>
SetProcess (100) // set progress bar 100%
Window. setTimeout ("porcessDiv. innerHTML ='' ", 500) // close the progress bar div after 0.5 seconds
</Script>
 
Use JQuery to achieve the page Loading effect. That is, when the page is loaded, the Loading progress bar is displayed. When all the pages are loaded, the progress bar disappears.

The method on the second floor is not a conventional solution. I personally feel that it is not very good (however, the loading progress is true, his progress bar can reflect the remaining content of the page not currently loaded --- in fact, this method is also quite good .... but in general, there is no need. If you want to do this, it is better to use flex ).
The method on the first floor is incorrect. If you simply put a loading image on the page, there are two possible situations: 1. loading is possible. 2. If most or all of the other elements on the page are loaded, the image will not be loaded.

The conventional solution is better with ajax. This is probably the case.
Two pages are required. 1. One is the actual page itself 2. The other is a blank page with a loading Image
First, request 2nd pages, put a section of ajax request 1st pages in this page, output the page content in the success function, and hide the loading image.
The Code is as follows:
Loading page:
<Body>

<Body>
<Script>
$. Ajax ({
Type: 'get ',
Url: actual page path,
Data :{},
Success: function (){
$ ('Body'). append (data );
$ ('# LoadingImg'). hide (); // or directly remove ()
},
DataType: 'html'
});
</Script>

========================================================== ============================
Well, if you need to consider searching for a loading problem, it would be so troublesome. <Div id = "forspider"> ...... search for the pure HTML of the spider... </div> is the content of the HTML of the entire actual page? If yes, loading the loading page itself will be very heavy. It is better to jump directly to the real page. Well, unfortunately, I don't know much about search, but it's a tragedy. Please advise ---- why do we need to use the absolute position overwrite method to hide it. Will the spider not see this layer of display: none directly?