JQuery fügt eine Ladeübergangsmaske hinzu

In diesem Artikel wird hauptsächlich Jquery zum Hinzufügen einer Ladeübergangsmaske vorgestellt, die einen bestimmten Referenzwert hat. Jetzt kann ich sie mit allen teilen, die sie benötigen.

Verwenden Sie Webpack, um ein H5-Projekt und CSS zu verpacken. Es ist in bundle.js verpackt. Wenn das Laden langsam ist, wird die Seite einige Sekunden lang ohne Stil hässlich angezeigt. Daher möchte ich eine weiße Maske festlegen und nach dem Laden von js verschwinden.
Fügen Sie einen Ladeblock mit seinen eigenen Inline-Stilen in den Textkörper ein (damit Sie sich beim ersten Laden nicht auf die in bundle.js bereitgestellten Stilinformationen verlassen müssen).

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

Warten Sie dann, bis die js geladen sind, und führen Sie die Verschwinden-Methode aus. Hier wird die Callback-Funktion von animate() verwendet, um den Übergang natürlicher zu gestalten. es gibt viel Platz.

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

Der Effekt ist wie folgt

Das war vor der Optimierung so, der Unterschied ist immer noch sehr groß

Der Oben finden Sie den gesamten Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

vue, um einen digitalen Scrolleffekt zu erzielen

Das obige ist der detaillierte Inhalt vonJQuery fügt eine Ladeübergangsmaske hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!