Este tutorial explica cómo eliminar el puente de la pantalla de carga del servidor FiveM
creando o modificando un recurso de pantalla de carga.
Prerrequisitos
- Acceso al servidor FiveM con permisos de modificación de recursos
- Comprensión básica de HTML/CSS
- un editor de texto como Bloc de notas++ (o el bloc de notas predeterminado de Windows)
Método 1: Crear un nuevo recurso de pantalla de carga
Paso 1: Crear la estructura de recursos
loadingscreen/ ├── fxmanifest.lua ├── index.html └── style.css
Paso 2: Configurar 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'
}
Paso 3: Crear index.html
<!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>
Paso 4: Agregar a server.cfg
ensure loadingscreen
Método 2: Modificar la pantalla de carga existente
Paso 1: Localizar el recurso de la pantalla de carga actual Controlar server.cfg para líneas que comienzan con ensure o start que contiene “cargando” o “pantalla de carga”
Paso 2: Agregar código de eliminación del puente Insertar en el archivo HTML existente antes de cerrar </body> etiqueta:
<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étodo de anulación de CSS
Añade al archivo CSS de tu pantalla de carga:
.bridge-overlay,
#bridge,
[class*="bridge-"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
Solución de problemas
Puente aún visible:
- Borrar caché del servidor: Eliminar
cache/carpeta - Verificar el orden de carga de recursos en
server.cfg - Compruebe la consola del navegador (F12) para detectar errores de JavaScript
La pantalla de carga no aparece:
- Confirmar
loadscreendirectiva en fxmanifest.lua - Verificar que las rutas de los archivos coincidan exactamente (distingue entre mayúsculas y minúsculas)
- Compruebe la consola del servidor para detectar errores de recursos
Notas técnicas
- Las pantallas de carga de FiveM se ejecutan en CEF (Chromium Embedded Framework)
- Elemento de puente normalmente inyectado por mecanismos de carga predeterminados
- MutationObserver garantiza la eliminación de elementos agregados dinámicamente
Incertidumbres
- Los nombres exactos de las clases de elementos de puente pueden variar entre las versiones de FiveM
- Algunos marcos personalizados pueden usar diferentes implementaciones de superposición
Resumen: Elimine la superposición del puente de FiveM creando un recurso de pantalla de carga personalizado con JavaScript que apunta y elimina los elementos del puente durante la carga de la página.
