0

Estoy teniendo varios inconvenientes mostrando imagenes y slider en mi html. Al cargar la pagina desde el arranque las imagenes tardan demasiado en mostrarse, y se van cargando poco a poca y se muestra la imagen cargando, se ve muy feo obviamente. aca les muestro una foto introducir la descripción de la imagen aquí

las imagenes son png y pesan entre 4 a 7 mb cada una, queria tener un asesoramiento del pq podria tener ese comportamiento?

y segundo, tengo un slider que hice con lightslider de jquery, funciona muy bien, pero al cargar la pagina desde el arranque, el lightslider sale por defecto en vertical, hasta que se acomoda en horizontal donde lo ubico en mi web. Pero al arrancar la pagina se muestra de manera vertical hasta que se acomoda en horizontal, pero de manera muy lenta. lo tengo con $(document ) ready. Tendira que retrasarlo para que solo se muestre cuando este listo? O ajuro tendria que ponerle un loader a mi pagina hasta que este todo listo para mostrarse? asi se ve en slider introducir la descripción de la imagen aquí

este es el html del slider

            <!-- --------- 1--------->
            <li class="item-a">
                <!-- slider box -->
                <div class="boxmarve">

                    <!-- model -->
                    <img src="estilos/imagenes/tecno/point.png" class="model">

                    <!-- details -->
                    <div class="details">

                    </div>
                </div>
            </li>
       </ul>

tiene varios item-a que forman el slider obviamente

y este el es js del slider

          $(document).ready(function() {
             var autoplaySlider = $('#autoplay').lightSlider({
                 auto:true,
                loop:true,
                 pauseOnHover: true,
                 onSliderLoad: function() {
                    $('#autoplay').removeClass('cS-hidden');
                        } 
                     });
                     $('#total').text(autoplaySlider.getTotalSlideCount());
                         });

les agradeceria un consejo de como puedo mejorar este rendimiento. Este comportamiento desde el lcoalhost con xampp, y con live server VS.

me pasa lo mismo con la todas las imagenes.

2
  • 1
    La lentitud es por lo que mencionas las imagenes son png y pesan entre 4 a 7 mb cada una. Aún con transparencia, no deberían pesar más de 500kb y, pensando en un listado, creo que el máximo debería der 200kb.
    – Triby
    Commented el 2 ago. 2020 a las 3:39
  • Gracias triby voy a probar con eso Commented el 2 ago. 2020 a las 12:20

1 respuesta 1

0

Te recomiendo precargar tus imagenes por ejemplo:

<img async src="./assets/image/fondos/3.jpg" style="display: none;" />

la idea es cargarla en cache para cuando la tengas que mostrar la tengas precargada Tambien recomiendo disminuir tu imagen y exportarla para web esto esta disponible en Adobe Illustrator y Photoshop y que sean tipo JPG

1
  • Gracias garcia treji. Y alguna sugerencia para q el slider no me aparezca verticalmentr antes de acomodarse? Commented el 2 ago. 2020 a las 12:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.