Feature/lazyloading

[robertvrabel]

Leaving this open for a bit as I want to discuss it with the team.

• This adds a polyfill for IntersectionObserver which figures out what images are in bound in the users viewport and lazy loads them to save bandwidth.
• Gets rid of the old b-lazy so everything uses IntersectionObserver
• Images from factories are now unique by number so in the network tab of the page it counts as a new image to load. This is helpful when testing lazy loading situtations
• The 1px gif is now located in one place at partials.image-fake so its easier to use
• Split the image list page in the styleguide so its Image List Rotate and Image Button List
• Skip links are now it's own partial SCSS file instead of being grouped in the utilities file
• Adds a custom blade directive for including a lazy image: @image('path-to-image', 'alt text', 'optional-class-name')

[coveralls]

Coverage remained the same at 100.0% when pulling 5154103 on feature/lazyloading into 09092f0 on develop.

[nickdenardis]

Would this overwrite any other inline styles on the image?

Feel like this may be a better approach to swap out the background-image:

lazyImage.style.backgroundImage = "url('"+lazyImage.dataset.src+"')";

[robertvrabel]

Yea i'm good with doing that! I'll make the change.

[robertvrabel]

I added a custom blade directive for an image @image('path-to-image', 'alt text', 'optional-class-name')

Its wonky how you pass in multiple optional parameters, but I got the idea from this to split the string: https://zaengle.com/blog/exploring-laravels-custom-blade-directives . I'm looping through to check how many params were passed in and then I set them as blank strings (so they are optional) if not passed in.

[robertvrabel]

Yea i'm good with doing that! I'll make the change.