Désactiver l'élément Bridge dans l'écran de chargement de FiveM

Ce tutoriel explique comment supprimer le pont de l'écran de chargement du serveur FiveM
en créant ou en modifiant une ressource d'écran de chargement.

Prérequis

Accès au serveur FiveM avec autorisations de modification des ressources
Compréhension de base du HTML/CSS
un éditeur de texte comme Bloc-notes++ (ou le bloc-notes par défaut de Windows)

Méthode 1 : Créer une nouvelle ressource d'écran de chargement

Étape 1 : Créer une structure de ressources

loadingscreen/ ├── fxmanifest.lua ├── index.html └── style.css

Étape 2 : Configurer fxmanifest.lua

fx_version 'cerulean' jeu 'gta5' auteur 'VotreNom' description 'Écran de chargement personnalisé - Pont désactivé' version '1.0.0' loadscreen 'index.html' loadscreen_cursor 'yes' fichiers { 'index.html', 'style.css' }

Étape 3 : Créer index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="loading-container">
        <h1>Nom du serveur</h1>
        <div class="progress-bar">
            <div class="progress-fill"></div>
        </div>
    </div>
    
    <script>
        // Disable bridge overlay
        window.addEventListener('DOMContentLoaded', () => {
            const bridge = document.querySelector('.bridge-overlay');
            if (bridge) bridge.remove();
        });
        
        // Handle loading progress
        window.addEventListener('message', (e) => {
            if (e.data.eventName === 'loadProgress') {
                const fill = document.querySelector('.progress-fill');
                fill.style.width = e.data.loadFraction * 100 + '%';
            }
        });
    </script>
</body>
</html>

Étape 4 : Ajouter à server.cfg

assurer l'écran de chargement

Méthode 2 : Modifier l'écran de chargement existant

Étape 1 : Localiser la ressource de l'écran de chargement actuel Vérifier serveur.cfg pour les lignes commençant par assurer ou commencer contenant « chargement » ou « écran de chargement »

Étape 2 : ajouter le code de suppression du pont Insérer dans le fichier HTML existant avant de fermer </body> étiqueter:

<script>
    // Remove bridge on load
    document.addEventListener('DOMContentLoaded', function() {
        const bridgeElements = document.querySelectorAll(
            '.bridge-overlay, #bridge, [class*="bridge"]'
        );
        bridgeElements.forEach(el => el.style.display = 'none');
    });
    
    // Backup removal for dynamically loaded elements
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            mutation.addedNodes.forEach((node) => {
                if (node.nodeType === 1 && 
                    (node.classList?.contains('bridge-overlay') || 
                     node.id === 'bridge')) {
                    node.remove();
                }
            });
        });
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
</script>

Méthode de remplacement CSS

Ajoutez au fichier CSS de votre écran de chargement :

.bridge-overlay, #bridge, [class*="bridge-"] { affichage : aucun !important ; visibilité : masqué !important ; opacité : 0 !important ; }

Dépannage

Pont toujours visible :

Vider le cache du serveur : Supprimer cache/ dossier
Vérifier l'ordre de chargement des ressources dans serveur.cfg
Vérifiez la console du navigateur (F12) pour les erreurs JavaScript

L'écran de chargement n'apparaît pas :

Confirmer écran de chargement directive dans fxmanifest.lua
Vérifier que les chemins d'accès aux fichiers correspondent exactement (sensible à la casse)
Vérifiez la console du serveur pour les erreurs de ressources

Notes techniques

Les écrans de chargement FiveM fonctionnent dans CEF (Chromium Embedded Framework)
Élément de pont généralement injecté par les mécanismes de chargement par défaut
MutationObserver assure la suppression des éléments ajoutés dynamiquement

Incertitudes

Les noms exacts des classes d'éléments de pont peuvent varier entre les versions de FiveM
Certains frameworks personnalisés peuvent utiliser différentes implémentations de superposition

Résumé: Supprimez la superposition de pont de FiveM en créant une ressource d'écran de chargement personnalisée avec JavaScript qui cible et supprime les éléments de pont lors du chargement de la page.

Comment créer un écran de chargement personnalisé