Bridge-Element im FiveM Ladebildschirm deaktivieren
Bridge-Overlay aus dem FiveM-Ladebildschirm entfernen. Schritt-für-Schritt-Anleitung mit zwei Methoden: neue Ressource oder bestehenden Screen modifizieren.
Einführung
Das Bridge-Element ist ein Standard-Overlay, das FiveM während des Ladevorgangs über den Ladebildschirm deines Servers legt. Es zeigt typischerweise FiveM-Branding und Verbindungsinformationen an, die vom Client automatisch injiziert werden. Für viele Serverbesitzer ist dieses Overlay ein Problem: Es überlagert den eigenen, sorgfältig gestalteten Ladebildschirm und wirkt unprofessionell, wenn sich das Design nicht in das Gesamtbild des Servers einfügt.
Dieses Tutorial erklärt zwei bewährte Methoden, um die Bridge aus deinem FiveM-Server-Ladebildschirm zu entfernen -- entweder durch Erstellen einer neuen Ladebildschirm-Ressource oder durch Modifikation deines bestehenden Screens.
Technischer Hintergrund: Wie FiveM Ladebildschirme rendert
FiveM nutzt das Chromium Embedded Framework (CEF), um Ladebildschirme darzustellen. Im Grunde läuft ein vollständiger Chromium-Browser im Hintergrund, der deine HTML-, CSS- und JavaScript-Dateien rendert. Das Bridge-Element wird dabei nicht aus deiner Ressource geladen, sondern vom FiveM-Client selbst in das DOM injiziert -- meist als Overlay-Div mit Klassen wie bridge-overlay oder der ID bridge.
Genau deshalb reicht es nicht, das Element einfach in deinem HTML wegzulassen. Du musst es aktiv entfernen oder verstecken, nachdem es vom Client eingefügt wurde. Die folgenden Methoden nutzen JavaScript und CSS, um genau das zu erreichen.
Voraussetzungen
- FiveM-Server-Zugang mit Ressourcen-Änderungsrechten
- Grundlegende HTML/CSS-Kenntnisse
- Ein Texteditor wie Notepad++ (oder der Standard-Editor von Windows)
Methode 1: Neue Ladebildschirm-Ressource erstellen
Diese Methode eignet sich, wenn du noch keinen eigenen Ladebildschirm hast oder komplett von vorne anfangen möchtest. Wenn du bereits einen benutzerdefinierten FiveM-Ladebildschirm erstellt hast, ist Methode 2 vermutlich der bessere Weg.
Schritt 1: Ressourcen-Struktur erstellen
Lege im resources-Verzeichnis deines Servers einen neuen Ordner loadingscreen an. Die Struktur ist minimalistisch gehalten -- du brauchst nur drei Dateien:
loadingscreen/
├── fxmanifest.lua
├── index.html
└── style.css
Schritt 2: fxmanifest.lua konfigurieren
Die fxmanifest.lua teilt FiveM mit, dass diese Ressource einen Ladebildschirm bereitstellt. Die Direktive loadscreen verweist auf die HTML-Datei, und loadscreen_cursor aktiviert den Mauszeiger während des Ladens, damit Spieler beispielsweise auf Links klicken können.
fx_version 'cerulean'
game 'gta5'
author 'DeinName'
description 'Benutzerdefinierter Ladebildschirm - Bridge deaktiviert'
version '1.0.0'
loadscreen 'index.html'
loadscreen_cursor 'yes'
files {
'index.html',
'style.css'
}
Schritt 3: index.html erstellen
Die HTML-Datei enthält sowohl dein Ladebildschirm-Layout als auch das JavaScript, das die Bridge entfernt. Der DOMContentLoaded-Listener wartet, bis die Seite vollständig geladen ist, und entfernt dann alle Bridge-Elemente. Der zweite Event-Listener empfängt loadProgress-Nachrichten vom FiveM-Client und aktualisiert den Fortschrittsbalken entsprechend.
<!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>
// Bridge-Overlay deaktivieren
window.addEventListener('DOMContentLoaded', () => {
const bridge = document.querySelector('.bridge-overlay');
if (bridge) bridge.remove();
});
// Lade-Fortschritt handhaben
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>
Schritt 4: Zu server.cfg hinzufuegen
Trage die neue Ressource in deine server.cfg ein. Wichtig: Der Ladebildschirm sollte möglichst früh geladen werden, idealerweise als eine der ersten Ressourcen.
ensure loadingscreen
Methode 2: Bestehenden Ladebildschirm modifizieren
Falls du bereits einen eigenen Ladebildschirm nutzt, musst du keine neue Ressource erstellen. Stattdessen fügst du den Bridge-Entfernungs-Code direkt in deinen bestehenden Screen ein.
Schritt 1: Aktuelle Ladebildschirm-Ressource finden
Durchsuche deine server.cfg nach Zeilen mit ensure oder start, die "loading" oder "loadscreen" enthalten. Öffne dann die entsprechende Ressource und suche die HTML-Datei, die in der fxmanifest.lua als loadscreen definiert ist.
Schritt 2: Bridge-Entfernungs-Code hinzufügen
Füge den folgenden Code vor dem schließenden </body>-Tag in die bestehende HTML-Datei ein. Dieses Skript arbeitet zweistufig: Zuerst werden beim Laden der Seite alle bekannten Bridge-Elemente versteckt. Der MutationObserver überwacht dann zusätzlich das DOM auf Änderungen und entfernt Bridge-Elemente, die erst nach dem initialen Laden dynamisch vom Client eingefügt werden.
<script>
// Bridge beim Laden entfernen
document.addEventListener('DOMContentLoaded', function() {
const bridgeElements = document.querySelectorAll(
'.bridge-overlay, #bridge, [class*="bridge"]'
);
bridgeElements.forEach(el => el.style.display = 'none');
});
// Backup-Entfernung für dynamisch geladene Elemente
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
Als zusätzliche Absicherung kannst du CSS-Regeln in die Stylesheet-Datei deines Ladebildschirms einfügen. Das !important-Flag stellt sicher, dass diese Regeln Vorrang vor eventuellen Inline-Styles des Bridge-Elements haben. Die Kombination aus display: none, visibility: hidden und opacity: 0 deckt verschiedene Rendering-Pfade ab.
.bridge-overlay,
#bridge,
[class*="bridge-"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
Eigenen Ladebildschirm gestalten
Wenn du die Bridge entfernst, hast du die volle Kontrolle über das Erscheinungsbild deines Ladebildschirms. Hier einige Tipps, um einen professionellen und ansprechenden Screen zu erstellen:
Hintergrundbilder: Verwende hochwertige Screenshots oder eigens erstellte Grafiken, die zu deinem Server-Thema passen. Achte darauf, Bilder in WebP oder komprimiertem JPEG zu verwenden, um die Ladezeit nicht unnötig zu verlängern.
Fortschrittsbalken: Gestalte den Fortschrittsbalken passend zu deinem Server-Branding. Farben, Animationen und Formen lassen sich komplett über CSS steuern. Ein animierter Gradient oder ein Glow-Effekt kann den Ladebildschirm deutlich aufwerten.
Branding-Elemente: Platziere dein Server-Logo prominent, zeige Regeln oder Tipps in einer Slideshow an, oder integriere einen Musik-Player für Hintergrundmusik. Alles, was mit Standard-Webtechnologien möglich ist, funktioniert auch im FiveM-Ladebildschirm.
Community-Integration: Manche Server zeigen auf dem Ladebildschirm aktuelle Spielerzahlen, Discord-Links oder Changelogs an. Dafür kannst du über JavaScript externe APIs abfragen, solange der Client eine Internetverbindung hat.
Performance-Tipps für Ladebildschirme
Ein aufwändiger Ladebildschirm kann die ohnehin schon langsame Verbindungsphase zusätzlich bremsen. Beachte diese Optimierungen:
- Bildgrößen: Halte Hintergrundbilder unter 500 KB. Nutze Formate wie WebP und komprimiere mit Tools wie TinyPNG oder Squoosh. Ein 4K-Bild als Hintergrund ist Overkill -- 1920x1080 reicht aus.
- Externe Ressourcen vermeiden: Lade Schriftarten und Bibliotheken lokal, nicht über CDNs. Während der Verbindungsphase kann die Netzwerkverbindung instabil sein, was zu fehlenden Ressourcen führt.
- Animationen sparsam einsetzen: CSS-Animationen sind performanter als JavaScript-basierte. Vermeide aufwändige Partikeleffekte oder Canvas-Renderings, die CPU-Leistung kosten, die FiveM zum Laden braucht.
- Videos vermeiden: Eingebettete Videos als Hintergrund sehen zwar gut aus, beanspruchen aber erheblich Speicher und CPU. Falls du unbedingt Video nutzen willst, verwende das MP4-Format mit niedriger Bitrate.
Für eine tiefergehende Anleitung zum Optimieren deiner Server-Ladezeiten findest du weitere Tipps in unserem dedizierten Artikel.
Fehlerbehebung
Bridge noch sichtbar:
- Server-Cache leeren:
cache/-Ordner löschen und Server neu starten - Ressourcen-Ladereihenfolge in
server.cfgüberprüfen -- dein Ladebildschirm muss vor anderen Ressourcen geladen werden - Browser-Konsole (F12) auf JavaScript-Fehler prüfen, die das Entfernungsskript unterbrechen könnten
- Prüfe, ob dein FiveM-Client auf dem neuesten Stand ist -- ältere Versionen verwenden teilweise andere Klassennamen
Ladebildschirm erscheint nicht:
loadscreen-Direktive infxmanifest.luabestätigen -- Tippfehler sind die häufigste Ursache- Dateipfade exakt prüfen, da Linux-Server zwischen Groß- und Kleinschreibung unterscheiden
- Server-Konsole auf Ressourcen-Fehler prüfen (
[loadingscreen] LOADING FAILEDdeutet auf fehlende Dateien hin) - Stelle sicher, dass alle referenzierten Dateien auch im
files-Block derfxmanifest.luaaufgelistet sind
Weißer Bildschirm beim Laden:
- JavaScript-Syntax-Fehler in deiner
index.htmlkönnen den gesamten Ladebildschirm zum Absturz bringen - Teste deine HTML-Datei zuerst lokal im Browser, bevor du sie auf den Server lädst
- Fehlende CSS-Dateien verursachen manchmal einen leeren Bildschirm, auch wenn das HTML korrekt ist
Technische Hinweise
- FiveM-Ladebildschirme laufen in CEF (Chromium Embedded Framework), was bedeutet, dass moderne CSS- und JavaScript-Features unterstützt werden
- Das Bridge-Element wird typischerweise durch Standard-Lademechanismen des FiveM-Clients injiziert und ist nicht Teil deiner Ressourcen-Dateien
- Der MutationObserver stellt die Entfernung dynamisch hinzugefügter Elemente sicher, auch wenn das Timing der Injektion variiert
- Die genauen Bridge-Element-Klassennamen können zwischen FiveM-Versionen variieren -- die verwendeten Selektoren decken die gängigsten Varianten ab
- Einige benutzerdefinierte Frameworks wie ESX oder QBCore bringen eigene Ladebildschirm-Systeme mit, die möglicherweise andere Overlay-Implementierungen verwenden
Zusammenfassung: Das Bridge-Overlay in FiveM entfernst du, indem du per JavaScript und CSS die injizierten Elemente gezielt ansprichst und entfernst. Ob du eine neue Ressource erstellst oder deinen bestehenden Ladebildschirm modifizierst, hängt von deinem Setup ab. Kombiniere JavaScript-Entfernung mit CSS-Overrides für die zuverlässigste Lösung und achte auf Performance, damit der Ladevorgang nicht unnötig verlängert wird.
