Imagen Html5 Carga de pixelación

En mi website, 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 se acerca el zoom?

One Solution collect form web for “Imagen Html5 Carga de pixelación”

O si desea un efecto borroso de pixelado / representación, puede mirar 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 image. Medio usa a con un background de relleno ajustado a un porcentaje, que corresponde a la relación de aspecto de la image. Por lo tanto, evitan los reflujos mientras se cargan las imágenes, ya que todo se procesa en su position final. Esto también se conoce como marcadores de position intrínsecos.

  2. Cargue una versión minúscula de la image. Por el momento, parece que están solicitando pequeñas miniaturas JPEG con una calidad muy baja (por ejemplo, 20%). El marcado de esta image pequeña se devuelve en el código HTML inicial como una, por lo que el browser comienza a searchlos de inmediato.

  3. Una vez que se carga la image, se dibuja en a. Luego, los datos de la image se toman y se pasan a través de una function de desenfoque () personalizada. Puede verla, un poco codificada, en el file JS main-base.bundle. Esta function es similar, aunque no idéntica, a la function de desenfoque de StackBlur. Al mismo time, se solicita la image principal.

  4. Una vez que se carga la image principal, se muestra y el canvas se oculta.

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="http://img.javascriptes.com/javascript/1sg-uLNm73whmdOgKlrQdZA.jpg?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="http://img.javascriptes.com/javascript/1sg-uLNm73whmdOgKlrQdZA.jpg" src="http://img.javascriptes.com/javascript/1sg-uLNm73whmdOgKlrQdZA.jpg"> <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="http://img.javascriptes.com/javascript/1sg-uLNm73whmdOgKlrQdZA.jpg"&gt;</noscript> </div> </div> </figure> 

O bien, podría verificar este CodePen que creó JMPerez, en un bash por recrear el efecto por sí mismo.

Lamento mi primera respuesta si no es lo que estabas buscando.

  • Cómo detectar la label del artículo principal como Evernote clipper hizo
  • Mostrar todas las opciones de datalist en foco
  • ¿Compartir variables entre los trabajadores de la web?
  • Retrollamada de denegación de Firefox 11 y GeoLocation
  • ¿Cómo puedo usar las barras de desplazamiento para recorrer un canvas virtual?
  • Error curioso (?) De rectangularjs de renderizado de canvas HTML5
  • Safari para Mac ignorando el nombre de file de descarga HTML5
  • Cómo recuperar el background de DIV en una capa inferior con la position exacta usando jQuery y CSS
  • Descomprimir files zip con JavaScript en Firefox 3.6
  • Exportación e import de datos IndexedDB
  • ¿Hay alguna forma de cambiar los attributes de la label <html> durante el time de ejecución?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.