Jquery adds loading transition mask

This article mainly introduces Jquery to add loading transition mask, which has certain reference value. Now I share it with everyone. Friends in need can refer to it.

Use webpack to package an h5 project, css also It is packaged in bundle.js. If the loading is slow, the page will appear ugly without style for a few seconds, so I want to set a white mask and disappear after the js is loaded.
Put a loading block with its own inline style in the body (so you don't have to rely on the style information provided in bundle.js to be loaded at the first time).

  <!-- index.html -->
  <p></p>

Then wait for the js to be loaded and then execute the disappearing method. Here, the callback function of animate() is used to make the transition more natural. If you want to spend some effort on adjusting it, there is a lot of room.

 //index.js(打包后出现在bundle.js里)
  $('#loading').animate({
    opacity: '0'
  }, function () {
    $('#loading').hide()
  })

The effect is as follows

It was like this before optimization, the difference is still very big

The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

vue to achieve digital scrolling increase effect

The above is the detailed content of Jquery adds loading transition mask. For more information, please follow other related articles on the PHP Chinese website!