Improvement of b-img-lazy component

@victorhramos, @KonradDeskiewicz Let’s continue the conversation here. Initial issue #1619

There is an initial check which is executed when <b-img-lazy> is mounted and activated but due to the missing getBoundingClientRect of the html element nothing happens.

I would like to improve this component because it is very useful. Currently lazy loading does only work when the page scrolls. Not optimal when you have dynamic content and want to lazy load, but there is not enough content for the page to scroll. See my codesandbox below. https://codesandbox.io/s/z5pkrx89m

In addition it would be nice to have state classes like <router-link> has, e.g.

• img-lazy-blank when blank image is shown. Could be used to apply opacity or other css filters
• img-lazy-src when src image is shown.

And a last improvement that comes to my mind is async loading of src images e.g.

const prefetchImage = src => new Promise((resolve, reject) => {
    const img = new Image();
    eventOn(img, 'load', () => {
        resolve();
    });
    eventOn(img, 'error', () => {
        reject();
    });
    img.src = src;
});

[tmorehouse]

PR #2382 should fix this issue, as well as adds in a new show prop to force show the image.

Also, bubbled transitonend events are now monitored, so b-img-lazy should work inside elements with transitions that show/slide/scroll the content (on browsers that support the transitionend event).

[tmorehouse]

Yeah, let me check the code and see if we can make an adjustment to the mounted() hook.