In the project with Ajax to get data asynchronously sometimes because of data problems or network problems, the page has been shown blank, and now load the picture to transition this state, specific example code through this article to learn together, hope to help everyone.
<script> $ (function () {$.ajax ({URL: ',///File address link for Interface dataType: ' JSON ', type: ' POST ', befores End:function () {$ (' #loading '). HTML ("<p style=\" color: #999; font-size:14px\ "> Load, please ......</p> later")//Data send process first load picture}, Error:fu Nction (msg) {//Data read failed display Znodes=data.responsejson; Alert ("Sorry, data acquisition failed, please contact Administrator"); }, Success:function (msg) {//Data read successfully and displays the data list $ (' #loading '). FadeOut (1000); The picture shows the time; var ul = ""; for (var i= 0;i<msg.legth;i++) {//Data list lines ul + = "<li class= ' list ' ><a href= ' php/phparticle.php?art=" +msg I [' id ']+ ' class= ' widget-list-link ' > ' + msg[i][' title ']+ ' <i class= ' more-mark ' > ' + ' >> ' + ' </i>< /a></li> "; } $ ("#list"). HTML (UL); }, Error:function () {////Console.log ("link Error") on failure; } }); });</script>
Data is displayed in the load state