javascript - caniuse - can i use css grid

Html5 image Pixelation load

Question

En mi sitio web, las imágenes se cargan de arriba a abajo, ¿cómo puedo cambiarlas para que las imágenes se carguen en Pixelation, como en Google Maps cuando estás haciendo zoom?

Answer 1

O si desea un desenfoque pixelating / rendering, puede consultar aquí: https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/

Aquí es donde está pasando:

1. Renderiza un div donde se mostrará la imagen. Medio utiliza un con un fondo de relleno establecido en un porcentaje, que corresponde a la relación de aspecto de la imagen. Por lo tanto, evitan los reflujos mientras se cargan las imágenes, ya que todo se renderiza en su posición final. Esto también se ha referido como marcadores de posición intrínsecos.

2. Carga una pequeña versión de la imagen. Por el momento, parecen estar solicitando miniaturas pequeñas en JPEG con una calidad muy baja (por ejemplo, 20%). La marca de esta pequeña imagen se devuelve en el HTML inicial como un, por lo que el navegador comienza a buscarlos de inmediato.

3. Una vez que se carga la imagen, se dibuja en a. Luego, los datos de la imagen se toman y pasan a través de una función personalizada de desenfoque (). Puedes verlos, un poco codificados, en el archivo main-base.bundle JS. Esta función es similar, aunque no idéntica, a la función de desenfoque de StackBlur. Al mismo tiempo, se solicita la imagen principal.

4. Una vez que se carga la imagen principal, se muestra y se oculta el lienzo.

Todas las transiciones son bastante suaves, gracias a las animaciones CSS aplicadas.

Un ejemplo de la página:

<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
  <div class="aspectRatioPlaceholder is-locked">
    <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
    <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
      <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
        <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
        <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
        <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
    </div>
  </div>
</figure>

O puede revisar este CodePen que JMPerez creó, en un intento de recrear el efecto por sí mismo.

Lo siento por mi primera respuesta si no es lo que buscabas.