javascript lazyload (nojquery)

Últimamente estoy obsesionado con usar javascript vanilla, o en otras palabras javascript sin jquery u otra librería. Hace un rato estaba viendo como hacer una carga de imágenes por demanda, encontré varios scripts, pero no me convencían de todo. Por alguna razón sentía lenta la carga y me di cuenta del curioso ¿error? que tienen la mayoría de los scripts.

error 1: Usan window.innerHeight para detectar el tamaño de la pantalla sin elementos, y pensé, bueno, pues yo quiero que las imagenes se carguen por demanda, pero no necesito que se carguen hasta que el usuario las tenga en medio de la pantalla. Eso causa un molesto lag.  La solución fue usar window.outerHeight

error 2:  el desplazamiento natural es dar scroll hacia abajo, ¿entonces por que usar elem.getBoundingClientRect().bottom? mejor cargar la imagen desde que aparezca su primer pixel con elem.getBoundingClientRect().top

en fin.. aqui el script

y su uso en html

 

 

Martin Quinta

Crecí con una computadora desde el kinder. Empece a programar a los 14 y hoy, mas de una década después… realmente odio estar frente a una computadora. Pero programar es en lo que soy bueno, por lo tanto me desahogo en este blog mientras bebo cerveza artesanal y pienso en un mundo bonito donde Java no existe.

Facebook Twitter LinkedIn  

Entradas relacionadas:

Leave a Reply

Your email address will not be published. Required fields are marked *