About the implementation method of loading waiting effect before Ajax returns data

We all know that when we load some pages. A waiting loading page will appear. We pass parameters to the backend through an ajax request, and then the backend returns the data to the frontend after a series of operations. I hope to display a loading.gif before waiting for the data to be returned successfully. Next, through this article, I will share with you the loading waiting effect before Ajax returns data. Friends who need it can refer to it.

No nonsense, execute the click event on the page(<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build (this)">Generate</a>)

Call the following method:

function build(sender) {
  var jqSender = $(sender);
  var sceneid = jqSender.attr('sceneid');
  $.ajax({
   type: 'post',
   url: "Follow/UpdateUrl",
   data: { sceneid: sceneid },
   beforeSend: function () {
    jqSender.hide().after(&#39;<img  src="/static/imghwm/default1.png"  data-src="/images/load.gif"  class="lazy"  id="load"  / alt="About the implementation method of loading waiting effect before Ajax returns data" >&#39;);
   },
   success: function (data) {
    //根据id和class获取td标签
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.wxurl-col&#39;).html(data.QRUrl);
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.localkey-col&#39;).html(data.LocalKey);
    //隐藏生成按钮，插入图片
    var localkey = data.LocalKey;
    jqSender.after(&#39;<img  src="/static/imghwm/default1.png"  data-src="/image/&#39; + localkey + &#39;"  class="lazy"   / alt="About the implementation method of loading waiting effect before Ajax returns data" >&#39;);
   },
   complete: function () {
    $(&#39;#load&#39;).remove();
   }
  });
 }

The background page will not be written, url The path passed to the background is configured. The most important thing is

beforeSend: function () { jqSender.hide().after(&#39;<img  src="/static/imghwm/default1.png"  data-src="/images/load.gif"  class="lazy"  id="load"  / alt="About the implementation method of loading waiting effect before Ajax returns data" >&#39;); },

. This should take into account the characteristics of ajax asynchronous requests. When ajax is executed to the url, there will be an The thread jumps to the background for execution.

The browser will add a thread (I don’t know if this is standard) to continue executing the subsequent program, and pause and wait until success: function (data) The background successfully returns data

In this way, the picture inserted in before is equivalent to a loading. When the data is returned successfully, remove the picture in before and write it in the complete: function () statement.

My backend processing flow is roughly like this: First, make an http GET request to obtain the access_token of the WeChat public platform, and then use an http POST request to obtain the ticket in exchange for the WeChat QR code

Then use the WebClient method to download the requested QR code to local storage, and then add, delete, check, and modify the database to display the QR code on the web page.

Such a long period of time allows enough time for the loading to be displayed. If the time is relatively short, you can check online to see if a time has been defined so that the loading can be displayed completely so as not to be too abrupt.

Related recommendations:

How to load the animation method tutorial of the WeChat applet loading component

How to solve multiple ajax pages Request, page loading blocking problem

#What are the loading animations?

The above is the detailed content of About the implementation method of loading waiting effect before Ajax returns data. For more information, please follow other related articles on the PHP Chinese website!