Shulou(Shulou.com)06/01 Report--

Vue can customize instructions. Recently, in the course of learning, I came across a function that requires lazy loading of pictures. Finally, I rewrote it with reference to other people's code and ideas. How to implement the custom directive v-lazyload is described in detail below.

Let's take a look at how to use this instruction:

P_w_picpathSrc is the actual path to the picture to be loaded.

To implement this directive, we first create a separate file named lazyload.js. And fill in the basic code, as follows:

Export (Vue, options = {}) = > init =: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png' / / for example:

Ele is img binding. It's pawning, picpathic, lazyload.'

Inserted and updated provide hook functions for different stages of the execution of Vue instructions. Looking at the official website of Vue, you can see that there are a total of five stages.

The instruction definition function provides several hook functions (optional):

Bind: called only once, when the instruction is first bound to an element, this hook function allows you to define an initialization action that is performed once during binding.

Inserted: called when the bound element is inserted into the parent node (when the parent node exists, it does not have to exist in the document).

Update: called when the template of the bound element is updated, regardless of whether the bound value changes or not. Unnecessary template updates can be ignored by comparing the binding values before and after the update (see below for detailed hook function parameters).

ComponentUpdated: called when the template of the bound element completes an update cycle.

Unbind: called only once, when the instruction is unbound from the element.

All we need here is inserted and updated.

Next we specifically implement the implementation of addListener. Our specific ideas are as follows:

1. First see if this picture needs to be lazily loaded. There are two situations that do not need to be loaded: one is that the picture has not yet reached the visual area, and the other is that the picture has already been loaded.

2. Then listen to the scroll event of the window to determine which pictures can be loaded.

Here we need a list of images that need to be monitored that need to be lazily loaded and a list of images that need to be recorded that have been loaded. In addition, in order to facilitate the operation of the array, we add an array remove method.

Continue our code.

Export (Vue, options = {}) = > if (! Array.prototype.remove) {Array.prototype.remove = function (item) {if (! this.length) return var index = this.indexOf (item); if (index >-1) {this.splice (index,1) Return this}} init =: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png' listenList = p_w_picpathCatcheList = = (p_w_picpathSrc) = > const isCanShow = (item) = > = () = > const addListener = (ele,binding) = > p_w_picpathSrc = = item = ele.src = init. 'lazyload'

Then there are a few empty methods to implement.

IsAlredyLoad to determine whether the image has been loaded

Const isAlredyLoad = (p_w_picpathSrc) = > {if (p_w_picpathCatcheList.indexOf (p_w_picpathSrc) >-1) {return true;} else {return false;}

Whether the isCanShow picture enters the visual area, and if it has already entered, load it.

/ / check whether the picture can be loaded, and if so, load const isCanShow = (item) = > {var ele = item.ele; var src = item.src; / / the distance between the picture and the top of the page var top = ele.getBoundingClientRect () .top; / / height of the visible area of the page var windowHeight = window.innerHight / / top + 10 has entered the visual area 10 pixels if (top + 10)

< window.innerHeight){ var p_w_picpath = new Image(); p_w_picpath.src = src; p_w_picpath.onload = function(){ ele.src = src; p_w_picpathCatcheList.push(src); listenList.remove(item); } return true; }else{ return false; } }; onListenScroll监听滚动事件，并且检测是否进入可视区域。 const onListenScroll = () =>

{window.addEventListener ('scroll',function () {var length = listenList.length; for (let I = 0 item I {if (! Array.prototype.remove) {Array.prototype.remove = function (item) {if (! this.length) return var index = this.indexOf (item); if (index >-1) {this.splice (index,1) Return this}} var init = {lazyLoad: false, default: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png'} var listenList = []; var p_w_picpathCatcheList = [] Const isAlredyLoad = (p_w_picpathSrc) = > {if (p_w_picpathCatcheList.indexOf (p_w_picpathSrc) >-1) {return true;} else {return false;}} / / check whether the picture can be loaded, and if so, load const isCanShow = (item) = > {var ele = item.ele; var src = item.src / / the distance of the picture from the top of the page var top = ele.getBoundingClientRect (). Top; / / the height of the visual area of the page var windowHeight = window.innerHight; / / top + 10 has entered the visual area 10 pixels if (top + 10)

< window.innerHeight){ var p_w_picpath = new Image(); p_w_picpath.src = src; p_w_picpath.onload = function(){ ele.src = src; p_w_picpathCatcheList.push(src); listenList.remove(item); } return true; }else{ return false; } }; const onListenScroll = () =>

{window.addEventListener ('scroll',function () {var length = listenList.length; for (let I = 0 Tipi {/ / bound image address var p_w_picpathSrc = binding.value / / if it has already been loaded, you can directly assign src to if (isAlredyLoad (p_w_picpathSrc)) {ele.src = paired picture SRC; return false without reloading. } var item = {ele:ele, src:p_w_picpathSrc} / / the picture shows the default picture ele.src = init.default / / see if you can display this picture if (isCanShow (item)) {return} / / otherwise put the image address and elements in the listening lisenList listenList.push (item); / / then start listening to the page scroll event onListenScroll () } Vue.directive ('lazyload', {inserted:addListener, updated:addListener})}

You need to import this file into the main file when using it, and vue.use ()

Import LazyLoad from 'lazyLoad.js'Vue.use (LazyLoad)

And use the v-lazyload instruction as follows on all the pictures that need to be loaded lazily.

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.