feat(b-img-lazy): switch IntersectionObserver to use private v-b-visible directive

[tmorehouse]

Describe the PR

Rather than using IntersectionObserver directly, switch to the private v-b-visible directive

If we assume the user has added a polyfill for IntersectionObserver we can further reduce the size of the code by removing all the fallback window scroll/transition listeners.

If IntersectionObserver is not found, we just always force show the image (always non-lazy)

To Do:

• Update docs
• Update tests (Intersection Observer is not supported in JSDOM, so need a mock implementation)

PR checklist

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Enhancement
• ARIA accessibility
• Documentation update
• Other (please describe) code refactor

Does this PR introduce a breaking change? (check one)

• No
• Yes (please describe)

If IntersectionObserver support is not found (either natively or via polyfill), then the image will always be shown (non-lazy, and regardless of the show prop state)

The PR fulfills these requirements:

• It's submitted to the dev branch, not the master branch
• When resolving a specific issue, it's referenced in the PR's title (i.e. [...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)
• It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
• The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, fix typos, chore: fix typo in README, etc). This is very important, as the CHANGELOG is generated from these messages.

If new features/enhancement/fixes are added or changed:

• Includes documentation updates (including updating the component's package.json for slot and event changes)
• Includes any needed TypeScript declaration file updates
• New/updated tests are included and passing (if required)
• Existing test suites are passing
• The changes have not impacted the functionality of other components or directives
• ARIA Accessibility has been taken into consideration (Does it affect screen reader users or keyboard only users? Clickable items should be in the tab index, etc.)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

[codecov]

Codecov Report

Merging #3977 into dev will decrease coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##              dev    #3977      +/-   ##
==========================================
- Coverage   99.86%   99.86%   -0.01%     
==========================================
  Files         238      238              
  Lines        4466     4442      -24     
  Branches     1254     1248       -6     
==========================================
- Hits         4460     4436      -24     
  Misses          5        5              
  Partials        1        1

Impacted Files	Coverage Δ
src/components/image/img-lazy.js	100% <100%> (ø)	⬆️
src/directives/visible.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 62fb0b6...c0f3242. Read the comment docs.

[jacobmllr95]

@tmorehouse Yeah, I'am for the removing of the fallback code.

[tmorehouse]

@jackmu95 should we make it so that if IntersectionObserver is not found, then always show the image?

[jacobmllr95]

@tmorehouse Yeah. And adding a warning maybe to include a polyfill.

[tmorehouse]

It appears that Vue-test-utils doesn't unbind a directive if the directive is conditionally removed from the element. It only calls unbind if the node is destroyed. Although Vue itself does properly unbind a directive if it is removed from the render.