Desarrollo y diseño

Problema con galería bootstrap

YoDaa
YoDaa #1 May '21

Buenas, tengo un problema con la galería de bootstrap, es que, cuando cargo la imagen, se produce un desbordamiento de la galería, cargo la imagen desde ajax en laravel, he aquí el codigo.

   for(var i = 0; i < data.length; i++) {
                        if(i == 0)   {
                            document.getElementById("carruselImg").innerHTML += "<div class='carousel-item active' id='imgCarrusel'><img src='" + data[i].route + "' class='d-block w-100' alt='" + titulo + "'></div>" ;
                        }else{
                            document.getElementById("carruselImg").innerHTML += "<div class='carousel-item' id='imgCarrusel'><img src='" + data[i].route + "' class='d-block w-100' alt='" + titulo + "'></div>" ;
                        }
                    }

Codigo de la galeria:

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" style="height: 204px">
                <div class="carousel-inner" id="carruselImg">

            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"  data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"  data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

Alguna idea?

B
[Borrado] #2 May '21

Solo comentarte unas cosas por encima:

  1. Cuidado con los for en JS... los parámetros se evalúan en cada iteración.
  2. Maldigo a quien enseña a usar "i++" en vez de "++i". La diferencia es notoria... en el caso de "i++" se devuelve una copia de "i" y se incrementa el valor. En el for no estás usando para nada ese dato... con "++i" incrementas y ya. Este tipo de "mierdas" suelen tratarlas los compiladores... desconozco si los motores de JS son capaces de hacer lo mismo. Sea como fuere, mejor usar "++i" y evitar los toques mágicos lo máximo posible. ¿Alguien de por aquí usa "volatile" en los for de este tipo en C/C++?
  3. Intenta evitar el uso de "innerHTML", cada vez que haces un cambio estás "reprocesando" el elemento entero!! Usa "insertAdjacentHTML".
    En general mide bien el uso de métodos que causan lo que se llama "reflow", aquí una lista de ellos: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
  4. Es una buena práctica usar "===" en vez de "==" para evitar "type coercion" y hacer lo que exactamente quieres hacer, repito, evita la "magia" todo lo que puedas.
    Que conste que no necesitas un "if" para este caso en concreto. Mira sobre "template literals".
  5. No repitas un mismo "id"... el id debe ser único.

Me imagino que el problema vendrá porque cargas el carousel una primera vez cuando cargan los "assets" de la página y luego le inyectas imágenes sin recargar el carousel. Pero lo digo todo muy a vuela pluma...

2
isvidal
isvidal #3 May '21

Vengo a descubrirte el fantastico Array.map()

for(var i = 0; i < data.length; i++) {
console.log(data[\i])
}

— Javascript del a;o 1999

Es lo mismo que:

data.map(e => console.log(e))

— Javascript del a;o 2021

Tu decides, seguir siendo un pajeet del internet explorer del 2005 o programar como en 2021

1 1 respuesta
VonRundstedt
VonRundstedt #4 May '21

Con un css object fit en ese carousel no debería darte problemas.

Aún así bootstrap también tiene clases para max width y max height que le puedes añadir al container del carousel

B
[Borrado] #5 May '21

#3 Para ser precisos, cada forma tiene su sentido... dejando de lado temas como "composabilidad", "aislamiento", "legibilidad", etc... en colecciones grandes (por ejemplo 5.000.000 de registros o así) un for-loop es más óptimo que un map.

Está claro que para iterar sobre 1000 elementos "te da igual" usar una u otra (en cuanto a rendimiento. En estos casos 'map' es ligeramente mejor)... rascarás igual 0.2ms. Pero cuando hablamos de volúmenes grandes la diferencia pesa.

Para muestra un botón:

const testData = new Array(10000000);
testData.fill(666);

let sumA = 0; 
console.time(); 
testData.map((item) => { sumA += item }); 
console.timeEnd(); 
console.log(sumA);

let sumB = 0; 
console.time(); 
for (let i = testData.length - 1; i>=0; --i) { sumB += testData[i] }; 
console.timeEnd();
console.log(sumB);

** Que no me venga nadie diciendo de usar "reduce" en vez de "map" para este ejemplo, porque el tema es probar "map" frente a "for-loop". Que nos conocemos y sois muy perras ¬¬

Simplemente lo comento para que se tenga en mente de que las cosas existen por un motivo... usar la herramienta adecuada al problema que se plantea es importante.... La maquina Turbo 3000 a priori puede ser mejor... pero igual te gasta más energía que la Turbo 2000 :P

2 respuestas
YoDaa
YoDaa #6 May '21

#5 gracias por el consejo y lo tendre en cuenta, pero para el proyecto en cuestion son solo 40 puntos de un mapa los que tiene que recorrer, por eso

isvidal
isvidal #7 May '21

#5 Esta bien saberlo, pero el 99% de las veces es mejor usar un map o forEach.

Mucho menos propenso a introducir bugs anen de menor carga cognitiva al leerlo por ser mas sencillo de leer

1

Usuarios habituales

Tags