javascript - dfn - p html

Acelere la carga de la página diferiendo las imágenes

Question

Estoy creando una página que contendrá muchas imágenes de gran tamaño, por lo que naturalmente quiero asegurarme de que la página se cargue sin demasiados problemas. Leí este artículo aquí http://24ways.org/2010/speed-up-your-site-with-delayed-content

El método de aplazamiento es el siguiente (extraído de la página, no importa la URL)

<div>
    <h4>
        <a href="http://allinthehead.com/" data-gravatar-hash="13734b0cb20708f79e730809c29c3c48">
            Drew McLellan
        </a>
    </h4>
</div>

luego, un fragmento de js se encarga de cargar la imagen.

$(window).load(function() {
    $(''a[data-gravatar-hash]'').prepend(function(index){
        var hash = $(this).attr(''data-gravatar-hash'')
        return ''<img width="100" height="100" alt="" src="http://www.gravatar.com/avatar.php?size=100&amp;gravatar_id='' + hash + ''">''
    });
});

No planeo hacer esto para cada imagen, pero definitivamente para una imagen que no necesito que aparezca en el tiempo de carga de la página.

¿Es esta la mejor manera de ir o hay mejores maneras de lograr una carga más rápida de la página al diferir las imágenes?

Gracias

Answer 1

Aquí hay una versión que muestra .querySelectorAll :

function swapSrcAttributes(source) {
  return function(element) {
    element.setAttribute(''src'', element.getAttribute(source));
  }
}

function forEach(collection, partial) {
  for (var i = 0; i < collection.length; i++) {
     partial(collection[i]);
  }
}

function initDeferImages() {
  // for images
  var deferImages = document.querySelectorAll(''img[data-src]'');

  // or you could be less specific and remove the `img`
  deferImages = document.querySelectorAll(''[data-src]'');

  forEach(deferImages, swapSrcAttributes(''data-src''));
}

window.onload = function() {
  initDeferImages();
}

Aquí está la tabla de compatibilidad para .querySelector y .querySelectorAll través de https://caniuse.com/#feat=queryselector

Answer 2

Esta parece ser una forma bastante limpia de diferir las imágenes. El único problema potencial es si las imágenes contienen información importante, ya que "los atributos de datos son una nueva característica en HTML5".

Otra opción podría ser poner las imágenes al final del cuerpo y usar CSS para ubicarlas. Personalmente me quedaría con javascript.

Answer 3

Un poco tarde, pero en caso de que beneficie a otros, hay un gran artículo sobre este tema por Patrick Sexton https://varvy.com/pagespeed/defer-images.html

Básicamente, está sugiriendo lo mismo; solo con el uso de pequeñas imágenes codificadas en base 64, puede colocar sus etiquetas de imagen directamente en el HTML, lo que tiene la ventaja de poder controlar atributos como altura, ancho, alt, etc. individualmente. Será mucho más fácil mantener su HTML de esta manera en lugar de crear la etiqueta de imagen completa en un script.

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image1.jpg" alt="image 1">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image2.jpg" alt="image 2">

Entonces su script es simple y genérico para todas las imágenes.

<script>
function init() {
  var imgDefer = document.getElementsByTagName(''img'');
  for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute(''data-src'')) {
      imgDefer[i].setAttribute(''src'',imgDefer[i].getAttribute(''data-src''));
    }
  }
}

window.onload = init;
</script>