Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how to use vue-lazyload, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use vue-lazyload. Let's take a look at it.

V-lazy

This is one of the most commonly used things in Vue-Lazyload, and the usage is very simple:

Now let's take a look at how it is implemented internally. First, let's go to the source code on its github and find its definition:

Vue.directive ('lazy', {bind: lazy.add.bind (lazy), update: lazy.update.bind (lazy), componentUpdated: lazy.lazyLoadHandler.bind (lazy), unbind: lazy.remove.bind (lazy)}) Vue.directive (' lazy-container', {bind: lazyContainer.bind.bind (lazyContainer), update: lazyContainer.update.bind (lazyContainer), unbind: lazyContainer.unbind.bind (lazyContainer)})

We can find that it is implemented by using vue's custom instructions, which can be customized by vue's custom instructions, such as Vue.directive ('demo',..). Then you can use instructions such as v-demo. When you use them, there will be corresponding events for you to call back, such as bind,insert,unbind, etc. For more information, please see the following demo:

= > vue custom instruction (QR code)

After entering demo, we can see that bind and insert events start as soon as you enter, and then update and updateComponent events will be triggered when you type in the input box, unbind events will be triggered when you click hide, and bind and insert events will be triggered when you click on display. (for specific meaning, you can consult the official documents)

The custom instruction of vue can also take parameters, such as vue-lazy:background-image.container='src', which can be obtained through the binding parameter in the event. For example, the above background-image can be obtained through binding.arg, and .container can be obtained through binding.modifiers.

All right, having said so much, the implementation idea of v-lazy should be relatively clear, that is, an internal lazy class is implemented, which passes objects and parameters into the vue custom instruction, and then detects the location through detection events (scroll, etc.). Once this object appears on the screen, the picture is loaded. Let's take a look at the demo that has been implemented: (including img's v-lazy and div's v-lazy:background-image)

= > v-lazy demo (QR code)

Note: the src in data must use the variable in data and cannot write the real image path, which will lead to no effect because the custom instruction of vue must correspond to the variable or number in data. If you write an image path, you can't recognize it. I was cheated before. The fadeIn effect of the image here is to add a class of fadeIn after the load event.

V-lazy-container

Generally speaking, this is similar to v-lazy and is defined through custom instructions, but v-lazy-container scans internal child elements. V-lazy-container is generally used as follows:

V-lazy-container is different from v-lazy in that v-lazy-container sets the path of the image by setting the data-src,data-loading,data-error of the specified child element, which can be seen in the internal implementation:

Const imgs = this.getImgs () imgs.forEach (el = > {this.lazy.add (el, assign ({}, this.binding, {value: {src: 'dataset' in el? El.dataset.src: el.getAttribute ('data-src'), error:' dataset' in el? El.dataset.error: el.getAttribute ('data-error'), loading:' dataset' in el? El.dataset.loading: el.getAttribute ('data-loading')}}), this.vnode)})

Here is the written v-lazy-container demo:

= > v-lazy-container demo (QR code)

Note: the data-src set by the specified element within v-lazy-container is the real path to the image and cannot be a data variable, which is the exact opposite of v-lazy.

Lazy-component

This is quite different from the one above. Strictly speaking, this can be used not only for lazy loading of images, but also for lazy loading of components. The general structure is as follows:

For implementation, first use Vue.component ('lazy-component',...) Registering a global component, and then checking the location, if you spit out its internal contents within the scope of the view, this design is still clever:

Render (h) {if (this.show = false) {return h (this.tag)} return h (this.tag, null, this.$slots.default)}

We usually use component to specify a template, which uses render to generate its own content here, it uses a variable show to control whether to draw the internal content, at the beginning, show is false, then draw a div (tag is div), and so detect (detect div) appear on the screen, show is true, and the real content inside it will be drawn (this.$slots.default is the content under the custom control).

Lazy-component, as a component, provides a callback event (show) to the outside to indicate that load has started, so we can listen for this event on the outer layer:

Load () {this.show = true this.state.loaded = true this.$emit ('show', this)}

Let's take a look at a finished demo, this demo is still mainly to achieve lazy loading of pictures.

= > lazy-component demo (QR code)

Note: lazy-component itself can not achieve lazy loading of pictures, it only implements lazy loading of components, the above demo really achieves lazy loading because of the use of v-lazy. Lazy-component has a problem, that is, there must be something on top of it, otherwise it may not work, because it has a judgment when testing: bottom > 0, so it may not work if you use lazy-component in the first element.

This is the end of the article on "how to use vue-lazyload". Thank you for reading! I believe you all have a certain understanding of "how to use vue-lazyload". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.