justificado Galería : Intento cambiar el camino de imagen cuando la pantalla

Mi Justified Gallery es muy lento para cargar en el teléfono inteligente, así que me gustaría cambiar el camino de la imagen cuando la pantalla es de 800 px. El nuevo camino tiene imágenes más pequeñas (h350 en lugar de h450).

He estado intentando así.




    poisson
    
Poisson, Sérigraphie, 2020
A4 5€ / A3 8€




 and so on ... 



    $(function() {
    var width = $(window).width(); 

    if (width < 800) {
      $("#alldrawings img").each(function(index){
        var src = $(this).attr("src")
        var photoName = src.substr(src.lastIndexOf("/"));
        $(this).attr("src", "img/h350/"+photoName)
      })
    }
    else{
      $("#alldrawings img").each(function(index){
        var src = $(this).attr("src")
        var photoName = src.substr(src.lastIndexOf("/"));
        $(this).attr("src", "img/h450/"+photoName)
      })
    }});
 JUSTIFIED GALLERY 
    $('#alldrawings').justifiedGallery({
        rowHeight: 280,
        maxRowHeight: 450,
        lastRow: 'nojustify',
        margins : 8,
    });

El resultado (que puedes ver aquí el página de prueba ) es que el camino cambiante está funcionando, pero entonces JustifiedGallery no está funcionando correctamente. Normalmente debe precargar imágenes antes de mostrar la galería, fila por fila. Pero en este caso es primero mostrar toda la página con el contenido de imagen 'alt' y luego las imágenes aparecen en orden al azar, y no es hermoso. No sé cómo proceder a arreglarlo.

Gracias por cualquier ayuda

Pregunta hecha hace 3 años, 4 meses, 28 días - Por devninjax

3 Respuestas:

  • Gracias. Me las arreglé para hacer que funcione con IMG SRCSET en Firefox, pero no en Chrome (ignorándolo). Encontré muchos temas sobre este tema. Todos dicen que tengo que vaciar el caché, pero incluso con un caché vacío, Chrome v65 está ignorando el srcset ...

    Respondida el Dec 18, 2020 a las 13:18 - por geekguru

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando se debe a que Justified Gallery no está precargando las imágenes correctamente después de que cambias el camino de las imágenes en el script. Para solucionar esto, debes asegurarte de que Justified Gallery vuelva a cargar o recalcular la galería después de cambiar los caminos de las imágenes.

    Aquí te dejo una solución posible para tu código:

    javascript
$(function() {
    var width = $(window).width(); 

    if (width < 800) {
        $("alldrawings img").each(function(index){            var src = $(this).attr("src");
            var photoName = src.substr(src.lastIndexOf("/"));
            $(this).attr("src", "img/h350/"+photoName);
        });
    }
    else{
        $("alldrawings img").each(function(index){            var src = $(this).attr("src");
            var photoName = src.substr(src.lastIndexOf("/"));
            $(this).attr("src", "img/h450/"+photoName);
        });
    }

    $('alldrawings').justifiedGallery({        rowHeight: 280,
        maxRowHeight: 450,
        lastRow: 'nojustify',
        margins : 8,
    }).on('jg.complete', function () {
        // Código para ejecutar después de que Justified Gallery haya completado la carga
    });
});

    En este código, he añadido un evento on('jg.complete') que se activa cuando Justified Gallery ha completado la carga de las imágenes. Puedes agregar el código necesario dentro de esa función para controlar cómo se muestra la galería después de que las imágenes hayan sido precargadas correctamente.

    Espero que esta solución te ayude a solucionar el problema que estás experimentando con la galería justificada. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 19, 2020 a las 13:18 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que cuando cambias el atributo src de las imágenes, la galería justificada ya ha cargado las imágenes originales. Para resolver esto, puedes hacer lo siguiente:

    • Destruye la galería justificada existente después de cambiar los atributos `src`.
    • Vuelve a inicializar la galería justificada con las nuevas imágenes.

    Aquí tienes el código actualizado:

    javascript
$(function() {
    var width = $(window).width(); 

    if (width < 800) {
      $("alldrawings img").each(function(index){        var src = $(this).attr("src")
        var photoName = src.substr(src.lastIndexOf("/"));
        $(this).attr("src", "img/h350/"+photoName)
      })
    }
    else{
      $("alldrawings img").each(function(index){        var src = $(this).attr("src")
        var photoName = src.substr(src.lastIndexOf("/"));
        $(this).attr("src", "img/h450/"+photoName)
      })
    }

    // Destruye la galería justificada existente
    $('alldrawings').justifiedGallery('destroy');
    // Vuelve a inicializar la galería justificada
    $('alldrawings').justifiedGallery({        rowHeight: 280,
        maxRowHeight: 450,
        lastRow: 'nojustify',
        margins : 8,
    });
});

    Esto debería resolver el problema de que la galería justificada no funcione correctamente después de cambiar las imágenes.

    Respondida el Dec 19, 2020 a las 13:29 - por Gemini

    Votos positivos: 0 | Votos negativos: 0