interface Web
tutoriel CSS
Comment afficher la page après le chargement de la barre de progression
Comment afficher la page après le chargement de la barre de progression
1. Idée : ajoutez beaucoup d'images pour retarder le temps de chargement et afficher les images après le chargement. Définissez un calque externe p pour couvrir l'image, introduisez l'image affichée lors du chargement dans le calque interne p, centrez le calque interne p sur la page, utilisez la minuterie setInterval pour définir le calque externe p après 3 secondes, puis masquez le calque externe p. calque p pour afficher l’image. Afficher l’effet de la page après le chargement.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading .pic{
width: 64px;
height: 64px;
background: url(loading.gif);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
var loading='<p class="loading"><p class="pic"></p></p>';
$('body').append(loading);
setInterval(function(){
$('.loading').fadeOut();
},3000)
})
</script>
</body>
</html>Points de connaissances :
p Centrage :
position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
2.
Idée : utiliser la méthode de surveillance des événements d'état : onreadystatechange, juger redayState et obtenir l'effet d'afficher la page après le chargement
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading .pic{
width: 64px;
height: 64px;
background: url(loading.gif);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<p class="loading">
<p class="pic"></p>
</p>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
document.onreadystatechange=function(){
if(document.redayState=='complete'){
$('loading').fadeOut();
}
}
</script>
</body>
</html>Points de connaissance :
Surveillez l'état de readyState via l'événement onreadystatechange. Nous devons uniquement nous soucier du dernier statut « terminé ». Lorsque l'état complet est atteint, cela signifie que le chargement est réussi.
3.
Idée : Utilisez CSS3 pour obtenir des effets d'animation et afficher la page après le chargement. La même méthode de surveillance de l'événement onreadystatechange est utilisée, mais la différence est qu'un effet dynamique est obtenu.
Utilisez la balise i et ajoutez des styles CSS pour obtenir 5 rectangles espacés. Utilisez l'animation pour boucler toutes les 1,2 s, boucle infinie. Chaque balise i s'étire et se raccourcit dans la direction Y avec un délai de 0,1 s pour obtenir un effet d'animation.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading .pic{
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.loading .pic i{
display: block;
float: left;
width: 6px;
height: 50px;
background: #399;
margin: 0 2px;
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;
}
.loading .pic i:nth-child(2){
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loading .pic i:nth-child(3){
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading .pic i:nth-child(4){
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loading .pic i:nth-child(5){
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes load{
0%,40%,100%{
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20%{
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes load{
0%,40%,100%{
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20%{
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
</style>
</head>
<body>
<p class="loading">
<p class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
document.onreadystatechange=function(){
if(document.redayState=='complete'){
$('loading').fadeOut();
}
}
</script>
</body>
</html>Points de connaissance :
1.échelle : allongement et raccourcissement. échelleX:x direction. échelleY : direction y.
2.infini : boucle infinie
3.animate-delay : 0,1 s retard 0,1 s
4.@nom de l'animation keyframes{
0 %{
}
100 %{
}
}
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment supprimer le contenu d'actualités et de tendances de la recherche Windows 11
Oct 16, 2023 pm 08:13 PM
Lorsque vous cliquez sur le champ de recherche dans Windows 11, l'interface de recherche se développe automatiquement. Il affiche une liste des programmes récents à gauche et du contenu Web à droite. Microsoft y affiche des actualités et du contenu tendance. Le chèque d'aujourd'hui fait la promotion de la nouvelle fonctionnalité de génération d'images DALL-E3 de Bing, de l'offre « Chat Dragons with Bing », de plus d'informations sur les dragons, des principales actualités de la section Web, des recommandations de jeux et de la section Recherche de tendances. La liste complète des éléments est indépendante de votre activité sur votre ordinateur. Bien que certains utilisateurs puissent apprécier la possibilité de consulter les actualités, tout cela est abondamment disponible ailleurs. D'autres peuvent directement ou indirectement le classer comme promotion ou même publicité. Microsoft utilise des interfaces pour promouvoir son propre contenu,
Comment copier une page dans Word
Feb 20, 2024 am 10:09 AM
Vous souhaitez copier une page dans Microsoft Word et conserver la mise en forme intacte ? C'est une bonne idée car la duplication de pages dans Word peut être une technique utile pour gagner du temps lorsque vous souhaitez créer plusieurs copies d'une mise en page ou d'un format de document spécifique. Ce guide vous guidera pas à pas à travers le processus de copie de pages dans Word, que vous créiez un modèle ou que vous copiez une page spécifique dans un document. Ces instructions simples sont conçues pour vous aider à recréer facilement votre page sans avoir à repartir de zéro. Pourquoi copier des pages dans Microsoft Word ? Il existe plusieurs raisons pour lesquelles copier des pages dans Word est très bénéfique : Lorsque vous souhaitez copier un document avec une mise en page ou un format spécifique. Contrairement à la recréation de la page entière à partir de zéro
![Erreur de chargement du plugin dans Illustrator [Corrigé]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Erreur de chargement du plugin dans Illustrator [Corrigé]
Feb 19, 2024 pm 12:00 PM
Lors du lancement d'Adobe Illustrator, un message d'erreur de chargement du plug-in apparaît-il ? Certains utilisateurs d'Illustrator ont rencontré cette erreur lors de l'ouverture de l'application. Le message est suivi d'une liste de plugins problématiques. Ce message d'erreur indique qu'il y a un problème avec le plug-in installé, mais il peut également être provoqué par d'autres raisons telles qu'un fichier DLL Visual C++ endommagé ou un fichier de préférences endommagé. Si vous rencontrez cette erreur, nous vous guiderons dans cet article pour résoudre le problème, alors continuez à lire ci-dessous. Erreur de chargement du plug-in dans Illustrator Si vous recevez un message d'erreur « Erreur de chargement du plug-in » lorsque vous essayez de lancer Adobe Illustrator, vous pouvez utiliser les éléments suivants : En tant qu'administrateur
Guide de l'utilisateur de Windows 11 : Comment désactiver les fenêtres contextuelles publicitaires
Sep 22, 2023 pm 07:21 PM
Le système d'exploitation Windows 11 de Microsoft peut afficher périodiquement des suggestions sous forme de fenêtres contextuelles sur votre ordinateur à l'aide du système de notification. Le système de suggestions, initialement conçu pour fournir aux utilisateurs des conseils et des suggestions pour améliorer leurs flux de travail Windows 11, s'est presque entièrement transformé en un système publicitaire visant à promouvoir les services et produits Microsoft. Les fenêtres contextuelles de suggestion peuvent annoncer un abonnement Microsoft 365 aux utilisateurs, suggérer de lier un téléphone Android à l'appareil ou configurer une solution de sauvegarde. Si ces fenêtres contextuelles vous ennuient, vous pouvez modifier votre système pour les désactiver complètement. Le guide suivant fournit des recommandations sur la désactivation des fenêtres contextuelles sur les appareils exécutant le système d'exploitation Windows 11 de Microsoft.
Les sous-titres Stremio ne fonctionnent pas ; erreur lors du chargement des sous-titres
Feb 24, 2024 am 09:50 AM
Les sous-titres ne fonctionnent pas sur Stremio sur votre PC Windows ? Certains utilisateurs de Stremio ont signalé que les sous-titres n'étaient pas affichés dans les vidéos. De nombreux utilisateurs ont signalé avoir rencontré un message d'erreur indiquant « Erreur de chargement des sous-titres ». Voici le message d'erreur complet qui apparaît avec cette erreur : Une erreur s'est produite lors du chargement des sous-titres. Échec du chargement des sous-titres : Cela pourrait être un problème avec le plugin que vous utilisez ou avec votre réseau. Comme l’indique le message d’erreur, il se peut que ce soit votre connexion Internet qui soit à l’origine de l’erreur. Veuillez donc vérifier votre connexion réseau et vous assurer que votre Internet fonctionne correctement. En dehors de cela, il peut y avoir d'autres raisons derrière cette erreur, notamment un module complémentaire de sous-titres conflictuels, des sous-titres non pris en charge pour un contenu vidéo spécifique et une application Stremio obsolète. comme
Comment actualiser rapidement une page Web ?
Feb 18, 2024 pm 01:14 PM
L'actualisation des pages est très courante dans notre utilisation quotidienne du réseau. Lorsque nous visitons une page Web, nous rencontrons parfois certains problèmes, comme la page Web qui ne se charge pas ou ne s'affiche pas anormalement, etc. À ce stade, nous choisissons généralement d'actualiser la page pour résoudre le problème, alors comment actualiser la page rapidement ? Discutons des touches de raccourci pour l'actualisation de la page. La touche de raccourci d'actualisation de page est une méthode permettant d'actualiser rapidement la page Web actuelle via des opérations au clavier. Dans différents systèmes d'exploitation et navigateurs, les touches de raccourci pour l'actualisation de la page peuvent être différentes. Ci-dessous, nous utilisons le W commun
Comment personnaliser et modifier le mode veille sur iPhone : nouveautés d'iOS 17
Sep 21, 2023 pm 04:01 PM
La veille est une nouvelle fonctionnalité de la mise à jour iOS 17 qui offre un moyen nouveau et amélioré d'accéder aux informations lorsque votre téléphone est rapidement inactif. Avec StandBy, vous pouvez facilement vérifier l'heure, afficher les événements à venir, parcourir votre calendrier, obtenir des mises à jour météo pour votre emplacement, et bien plus encore. Une fois activé, l’iPhone entrera intuitivement en mode veille lorsqu’il sera réglé en mode paysage pendant le chargement. Cette fonctionnalité est parfaite pour les points de chargement sans fil comme votre table de chevet, ou lorsque vous êtes loin de charger votre iPhone pendant les tâches quotidiennes. Il vous permet de parcourir différents widgets affichés en veille pour accéder à différents ensembles d'informations provenant de diverses applications. Cependant, vous souhaiterez peut-être modifier ces widgets ou même en supprimer certains en fonction de vos préférences et des informations dont vous avez fréquemment besoin. Alors plongeons-nous dans
Raisons et solutions pour le verrouillage de la disposition du bureau
Feb 19, 2024 pm 06:08 PM
Que se passe-t-il lorsque la disposition du bureau est verrouillée ? Lors de l'utilisation de l'ordinateur, nous pouvons parfois rencontrer une situation dans laquelle la disposition du bureau est verrouillée. Ce problème signifie que nous ne pouvons pas ajuster librement la position des icônes du bureau ou modifier l'arrière-plan du bureau. Alors, que se passe-t-il exactement lorsqu'il est indiqué que la disposition du bureau est verrouillée ? 1. Comprendre la disposition du bureau et les fonctions de verrouillage. Tout d’abord, nous devons comprendre les deux concepts de disposition du bureau et de verrouillage du bureau. La disposition du bureau fait référence à la disposition de divers éléments sur le bureau, notamment les raccourcis, les dossiers, les widgets, etc. nous pouvons être libres
