Morioh
Login
Jack Downson

Jack Downson

3 years ago

Lazy loading of vue images depends on vue2.0

vue-viewload

Lazy loading of vue images depends on vue2.0 or above. Pictures or other resources are loaded after entering the viewable area.

Example preview

Examples are files in the /demo directory

Install vue-viewload

Use npm to install locally:

npm install vue-viewload --save-dev

Use vue-viewload

js file

// need to introduce VUE, and vue-viewload, following Axios is ajax libraries, if no reference may not 
Import  Vue  from  'VUE' 
Import  VueViewload  from  'VUE-viewload' 
Import  Axios  from  'Axios'

// 使用 VueViewload 
Vue . use ( VueViewload )

new  Vue ( { 
    the : '#app' , 
    date : { 
        pic : 'http://pics.sc.chinaz.com/files/pic/pic9/201701/bpic232.jpg' , 
        list : [ 
            http: // pics.sc.chinaz.com/files/pic/pic9/201702/zzpic1399.jpg ' , 
            ' http://pics.sc.chinaz.com/files/pic/pic9/201612/fpic9875.jpg ' , 
            ' http: //pics.sc.chinaz.com/files/pic/pic9/201610/fpic8220.jpg ' , 
            ' http://pics.sc.chinaz.com/files/pic/pic9/201611/fpic8607.jpg ' , 
            ' http://pics.sc.chinaz.com/files/pic/pic9/201611/fpic8745.jpg ' , 
            ' http: //pics.sc.chinaz.com/files/pic/pic9/201701/zzpic437.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201610/apic23881.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201608/fpic5949.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201608/fpic6419.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201609/fpic7403.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201609/fpic7317.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201605/fpic1376.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201606/apic21195.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201606/apic21465.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201604/apic20040.jpg',
            'http://pics.sc.chinaz.com/files/pic/pic9/201604/fpic914.jpg' , 
            'http://pics.sc.chinaz.com/files/pic/pic9/201604/fpic873.jpg ' , 
            ' 
        http : //pics.sc.chinaz.com/files/pic/pic9/201605/fpic1208.jpg ' ] 
    } , 
    methods : { 
        //The function needs to return a function 
        getAjaxContent : function ( )  { 
            return  function ( )  { 
                axios ( { 
                    method : 'get' , 
                    url : '../api/data.txt' 
                } ) . then ( ( response ) => {
                    this.innerHTML = response.data;
                })
            }
        }
    }
})

In the html file, add the vue instruction v-view to the element to be lazy loaded, the value of which is the URL or methods of loading the resource. For elements that need to be lazily loaded, please try to set the width and height styles

<div id="app">

    Img src element assigned to the # is provided when the image displayed image does not load, can be set to a picture loading.gif FIG dynamic loading < br />
     < img  src = " http://img.zcool.cn/community/0161f656b0663e6ac7256cb052d31a .gif " V-View =" PIC " > < br />

    The value of #v-view is not a variable, it is the resource URL address enclosed in single quotes < br />
     < img  v-view =" 'http://pics.sc.chinaz.com/files/pic/pic9/ 201701 / bpic232.jpg ' " style =" height: 200px; " > < br />

    # v-view value is a variable, pic values for the resource address url < br />
     < IMG  V-View = " PIC " style = " height: 200px; " > < br />

    The value of #v-view is a variable, and the variable value is obtained by traversing the list array < br />
     < img  v-view =" item " v-for =" item in list " style =" height:200px;display:block; " > < br />

    The value of #v-view is the methods method, generally used in non-img elements < br />
     < div  v-view =" getAjaxContent() " > Loading... </ div >

</div>

Set lazy loading options

//options object is optional, used to set lazy loading options 
Vue . use ( VueViewload ,  options )

options object

名称 描述 默认值 值类型
defaultPic 图片未加载完显示的图片 base64的空白图片 String
errorPic 元素为img类型时，图片加载失败显示的图片 base64的空白图片 String
threshold 阀值，用来设置提前多少像素进入可视区域。负值表示提前进入，正值表示延迟进入， 0 Number
effectFadeIn 图片加载完是否淡入显示 false Boolean
callback 资源进入可视区域后执行的回调函数。接收两个参数callback(ele, src)，ele是进入可视区域的元素，src是要加载的资源URL。可以用在非img元素进入可视区域加载 new Function Function

For example, set the default loading.gif image, load failure image, load the image 200px in advance, the image fades in, and the image enters the visible area to execute the callback function:

Vue.use(VueViewload, {
    defaultPic: 'http://img.zcool.cn/community/0161f656b0663e6ac7256cb052d31a.gif',
    errorPic: 'http://a0.att.hudong.com/77/31/20300542906611142174319458811.jpg',
    threshold: -200,
    effectFadeIn: true,
    callback: function(ele, src) {
        ele.style.border = '1px solid red';
        console.log(ele.nodeName + '...' + src);
    }
})

Download Details:

Author: shuizhubocai

GitHub: https://github.com/shuizhubocai/vue-viewload

#vuejs #vue #vue-js #javascript

Lazy loading of vue images depends on vue2.0
4.00 GEEK