Brug-element uitschakelen in FiveM-laadscherm

Deze tutorial legt uit hoe je de bridge verwijdert van het laadscherm van de FiveM-server
door een laadschermresource te maken of aan te passen.

Voorwaarden

Toegang tot de FiveM-server met machtigingen voor resourcewijzigingen
Basisbegrip van HTML/CSS
een teksteditor zoals Notepad++ (of het standaard kladblok van Windows)

Methode 1: Nieuwe laadschermresource maken

Stap 1: Resourcestructuur maken

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

Stap 2: Configureren fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

author 'YourName'
description 'Custom Loading Screen - Bridge Disabled'
version '1.0.0'

loadscreen 'index.html'
loadscreen_cursor 'yes'

files {
 'index.html',
 'style.css'
}

Stap 3: index.html maken

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div id="loading-container">
 <h1>Server Name</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>

Stap 4: Toevoegen aan server.cfg

ensure loadingscreen

Methode 2: Bestaand laadscherm aanpassen

Stap 1: Huidige laadschermresource vinden Controleren server.cfg voor regels die beginnen met ensure of start die “loading” of “loadscreen” bevatten”

Stap 2: Bridge-verwijderingscode toevoegen Invoegen in bestaand HTML-bestand voor de afsluitende </body> tag:

<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>

CSS-override-methode

Voeg toe aan het CSS-bestand van je laadscherm:

.bridge-overlay,
#bridge,
[class*="bridge-"] {
 display: none !important;
 visibility: hidden !important;
 opacity: 0 !important;
}

Probleemoplossing

Bridge nog steeds zichtbaar:

Servercache wissen: Verwijder cache/ map
Controleer de laadvolgorde van resources in server.cfg
Controleer de browserconsole (F12) op JavaScript-fouten

Laadscherm verschijnt niet:

Bevestig loadscreen directive in fxmanifest.lua
Controleer of bestandspaden exact overeenkomen (hoofdlettergevoelig)
Controleer de serverconsole op resourcefouten

Technische opmerkingen

FiveM-laadschermen draaien in CEF (Chromium Embedded Framework)
Bridge-element wordt doorgaans geïnjecteerd door standaard laadmechanismen
MutationObserver zorgt voor het verwijderen van dynamisch toegevoegde elementen

Onzekerheden

Exacte klassennamen van bridge-elementen kunnen variëren tussen FiveM-versies
Sommige aangepaste frameworks kunnen andere overlay-implementaties gebruiken

Samenvatting: Verwijder de bridge-overlay van FiveM door een aangepaste laadschermresource te maken met JavaScript dat bridge-elementen target en verwijdert bij het laden van de pagina.

Een aangepast laadscherm maken