paul-browne / lazyestload.js Goto Github PK

View Code? Open in Web Editor NEW

1.4K 47.0 85.0 7.96 MB

load images only when they are in (and remain in) the viewport

Home Page: https://rawgit.com/Paul-Browne/lazyestload.js/master/dist/lazyestload.html

JavaScript 33.83% HTML 66.17%

lazyload-images javascript progressive-enhancement

lazyestload.js's Introduction

load images only when they are in (and remain in) the viewport.

in only about 400 bytes of javascript 😱

  <img class="lazyestload" src="images/placeholder/sunset.jpg" data-src="images/sunset.jpg" >
  
  <script src="js/lazyestload.min.js"></script>
</body>

or with data-srcset

  <img class="lazyestload" src="images/placeholder/sunset.jpg" data-srcset="images/sunset-1x.jpg 1x, images/sunset-2x.jpg 2x, images/sunset-3x.jpg 3x" >

  <img class="lazyestload" src="images/placeholder/sunset.jpg" data-srcset="images/sunset-400.jpg 400w, images/sunset.jpg 1600w" >

or with picture and source

  <picture>
  	<source media="(max-width: 400px)" data-srcset="images/sunset-400.jpg" >
  	<source media="(max-width: 401px)" data-srcset="images/sunset.jpg" >
  	<img class="lazyestload" src="images/placeholder/sunset.jpg" >
  </picture>

demo lazyestload load images only when they are in the viewport (or within 100px) and when the user has stopped scrolling (meaning the user can scroll past images and they wont be loaded)

demo lazyload load images only when they are in the viewport or 100px beneath

When using placeholders the image should be less than 1kb, ~40px wide, and should have the same aspect ratio as the image that will replace it. (to avoid any layout jank) Also the "blur up" affect in the first demo works by adding the following css.

img {
    transition: filter 0.3s;
}

img.lazyestload {                
    width: 100%;
    filter: blur(8px);
}

I've added a placeholder generator. To use run npm i and then npm build you can also serve the demo locally with npm bsw (build, serve, watch)

lazyestload.js's People

Contributors

Stargazers

Watchers

Forkers

lnked neurosatan 12345-gh tiliaks luan0ap dimitreee wir poltavchenko precisioncoding chenymin mohd14shoeb palfaro91 xxrulixx jslibrarydirectory riteshhota2008 azarual datcuemil pritam001 tonyscorner twocngdagz anupamandroid eduardomlobo asyl20 mestrellar28 barbez77 philgill zaferbas zhiephieforks dulumao stramargio ducban ilhomjonkurbanov davutkara nikrou tomkopp feikerwu uchinx onecib akimsolovyov ixter andreygoncharik yorgigiri biborn aleksey-selyavkin ceboulba lalrinfela rgarciaseija senaygui rdamir82 pureliumy maksshev taku-o silent-lad martingutknecht vikks limeiralucas isnan909 merritt212 aspriant trickyc0d3r dmitriipopov ivanshinkarenko willnguyen1312 neuron-llc deepak-vasalamarri kumaranshu72 razvan-iri doominating muralimulagalapati-zz ngocongchinh samo29 yana0616 nakachii christef peter-rambeck iosc jetdwarf caesura10 candraydn brandonsandall jhegner kenken1979 mastershanecsw

lazyestload.js's Issues

Doesn't work for dynamic content

If an image is added by jquery, react or an ajax request lazyestload will not work if it already detached the scroll listener

unit tests / CI

We should have some unit tests and CI setup.

Consider using Intersection Observer API?

Intersection Observer API
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Polyfill from w3c
https://github.com/w3c/IntersectionObserver/tree/master/polyfill

This api is well suited for this awesome project.

It'd be even more awesome if you can also mention how yours is different in comparison to these:
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#lazy_loading_libraries

what differense between lazyload.js and lazyestload.js

background images

I tend to use background images for responsive work these days, is there any way this could support background images?

Can you include a minified version of the JS?

Cant find the minified version of the JS. Can you include it in the src?

Thank you for this...

... Well done seams very good.

What is the browsers support?

Please advise how to make image placeholders what size and quality etc. Some tips or auto scripts you know php?

Thank you again for this. I will try it.

Working with "data-srcset" -> data-srcset broken?

Hi there,

phenomenal work.

I'm struggling to get responsive images with srcset to work.
The data-srcset breaks for me.

Getting the following error:

Anyone experiencing the same issue?

Code:

<img class="lazyestload" src="images/imagethumb.jpg" data-srcset="images/image1.jpg 1x, images/image2.jpg 2x" >

Are the loaded images cached by browser?

I ran your demo several times but it seams the images are requested every page visit.
It will be good to have the cached images displayed if available instead of showing placeholder images on view port.

[enhancement] Integrate SVG placeholder generation via PoTrace

JavaScript implementation

A few possible implementation options.

Using an option in a script config
Detecting a class
Detecting an empty src

Picture element

Are you maybe interested in supporting picture and source elements?

jQuery with "on" listening

If you plan to load a ajax and put new dom elements, you will need to listen a sroll after load:

$(function () { function i() { var t = document.querySelectorAll("img.lazyload"), e = t.length; for (!e && window.removeEventListener("scroll", i); e--;) { var r = window.innerHeight; if (t[e].getBoundingClientRect().top - r <= 100) { if (t[e].getAttribute("data-src") && (t[e].src = t[e].getAttribute("data-src")), t[e].getAttribute("data-srcset") && (t[e].srcset = t[e].getAttribute("data-srcset")), "PICTURE" === t[e].parentElement.tagName) for (var n = t[e].parentElement.querySelectorAll("source"), a = n.length; a--;) n[a].srcset = n[a].getAttribute("data-srcset"); t[e].addEventListener("load", function () { this.classList.remove("lazyload") }) } } } i(); $(window).on('resize scroll', function () { i(); }); });

Memory leak

Hi, i not use your library, i simple came from some news article. I look on your code and you not handle case when image not loaded and user continuously scrolling and user got this.

Passive event listeners for onScroll event

Have you considered this approach - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners ?

Description here: https://alligator.io/js/speed-up-scroll-events/