1

Tengo una duda, estoy optimizando un sitio web y en la versión mobile estoy poniendo imágenes de menor tamaño y por lo tanto estoy ocultando con display none de CSS la imagen desktop. El problema mío es que por más que le ponga display none a la imagen de desktop se sigue cargan aunque no se vea. De qué forma puedo hacer para que no se cargue la imagen desktop en la versión mobile pero que al agrandar la pantalla si se cargue la versión desktop

1
  • ¿Puedes nombrar las imágenes como quieras? porque si usas un patrón, no tienes que nombrar una a una las imagenes, por ejemplo yo uso en móviles: nombreimagen_sm.jpg en tablets o smartphones grandes: nombreimagen_md.jpg y en grandes resoluciones nombreimagen_lg.jpg. Así puedes con javascript, buscar todas las imágenes, impedir que cargen y que dependiendo de cada resolución, añada al final de la ruta del img la respectiva sigla y ahí si cargarla. Commented el 19 ene. 2018 a las 16:15

1 respuesta 1

3

Podrias utilizar javascript para cargar la imagen que desees, te quedaria asi:

supón que tienes una etiqueta imagen asi:

<img id='img_bg'>

Luego atiendes el evento cuando se redimenciona la pantalla:

$(function() { 
    reDim() //llamo aquí la función para que compruebe con el onLoad de la pagina las dimensiones cuando se cargue

    $( window ).resize(function() { // cada vez que se re dimensiona la pantalla compruebas en que dimensión esta para cargar la imagen que debe ser
      reDim()
   });

  function reDim(){

     if( window.innerWidth >= 768){
               $('#img_bg').prop('src','/desktop.png')
        }else{

           switch(window.innerWidth) {
               case 600:
                  $('#img_bg').prop('src','/otra1.png')
                  break;
               case 500:
                  $('#img_bg').prop('src','/otra2.png')
                  break;
               case 400:
                  $('#img_bg').prop('src','/otra3.png')
                  break;
               case 300:
                  $('#img_bg').prop('src','/otra4.png')
                  break;
               default:
                  $('#img_bg').prop('src','/otra5.png')
           }
       }

  }
});

Nota: Debes utilizar jquery para el código anterior.

6
  • gracias por la ayuda! pero tengo otro problema, son como 100 imágenes las que debo adaptar, se pondrá pesado el sitio si genero una función por cada imagen que debo adaptar? Commented el 19 ene. 2018 a las 15:15
  • 1
    no necesariamente deberías generar una funcion para cada resolución, dependes del ancho y largo , del ancho nada mas , o del largo nada mas , dime tus opciones para acomodar la respuesta a tus necesidades.
    – Asney
    Commented el 19 ene. 2018 a las 15:21
  • cuando sea mayor a 768px de width que se cargue la imagen desktop y de lo contrario la mobile, la altura no me haría falta evaluarla. Mi problema es que son varias imágenes a adaptar y las obtengo con un loop de wordpress Commented el 19 ene. 2018 a las 15:24
  • 1
    te edite la respuesta , suponiendo varias dimensiones, pero si la ruta de las imágenes vienen de un loop, ya habría que ver como llegan, de que forma y cuando llamar a cada posición del loop
    – Asney
    Commented el 19 ene. 2018 a las 15:38
  • bueno, en base a tu solución la adaptare a lo que necesito, gracias! Commented el 19 ene. 2018 a las 15:56

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.