How to load pictures lazily with vue

This article will explain in detail how to achieve lazy loading of pictures on vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Picture lazy load

Lazy loading of pictures means that for pages with a lot of pictures, in order to improve the loading speed of the page, only the pictures in the visual area are loaded, and those outside the visual area wait until scrolled to the visual area before loading.

Some UI frameworks come with this feature, but what if they don't?

Recommend a third-party plug-in vue-lazyload

Npm I vue-lazyload-S VueLazyload / main.jsimport VueLazyload from 'vue-lazyload'Vue.use (VueLazyload) / / then you can use v-lazy lazily to load pictures on the page.

Or build your own wheel and manually encapsulate a custom instruction. Here you encapsulate a version that is compatible with all browsers, mainly to judge whether the browser supports IntersectionObserver API or not. If you support it, you can use it to load lazily. If you don't support it, you can implement it by listening for scroll events and throttling.

Const LazyLoad = {/ / install method install (Vue, options) {const defaultSrc = options.default Vue.directive ('lazy', {bind (el, binding) {LazyLoad.init (el, binding.value, defaultSrc)}, inserted (el) {if (IntersectionObserver) {LazyLoad.observe (el)} else {LazyLoad.listenerScroll (el)}},})} / / initialize init (el, val, def) {el.setAttribute ('data-src', val) el.setAttribute (' src', def)} / / use IntersectionObserver to listen to elobserve (el) {var io = new IntersectionObserver ((entries) = > {const realSrc = el.dataset.src if (entries [0] .isIntersecting) {if (realSrc) {el.src = realSrc el.removeAttribute ('data-src')}}) io.observe (el)}, / / listen to scroll event listenerScroll (el) {const handler = LazyLoad.throttle (LazyLoad.load) LazyLoad.load (el) window.addEventListener ('scroll', () = > {handler (el)})}, / / load real picture load (el) {const windowHeight = document.documentElement.clientHeight const elTop = el.getBoundingClientRect (). Top const elBtm = el.getBoundingClientRect (). Bottom const realSrc = el.dataset.src if (elTop-windowHeight)

0) {if (realSrc) {el.src = realSrc el.removeAttribute ('data-src')}}, / / Throttle throttle (fn, delay) {let timer let prevTime return function (... args) {const currTime = Date.now () const context = this if (! prevTime) prevTime = currTime clearTimeout (timer) if (currTime-prevTime > delay) {prevTime = currTime fn.apply (context) Args) clearTimeout (timer) return} timer = setTimeout (function () {prevTime = Date.now () timer = null fn.apply (context, args)}, delay)},} export default LazyLoad

In use, use v-LazyLoad instead of src.

This is the end of this article on "how to achieve lazy loading of pictures in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.