在項(xiàng)目中如果有大量的圖片需要加載的時(shí)候巴元，就可以考慮使用懶加載了者蠕，懶加載其實(shí)就是監(jiān)聽(tīng)瀏覽器的滾動(dòng)檩奠，當(dāng)滾動(dòng)到一定的范圍的時(shí)候就將圖片的真實(shí)路徑賦給src,然后取消監(jiān)聽(tīng)翁锡。
實(shí)現(xiàn)的方法也比較簡(jiǎn)單蔓挖，可以通過(guò)懶加載的插件實(shí)現(xiàn)，也可以手寫(xiě)馆衔，手寫(xiě)通過(guò)vue自定義指令來(lái)實(shí)現(xiàn)时甚，一般情況自定義指令用的也不多，比較vue自帶的就夠用了哈踱，大型復(fù)雜的項(xiàng)目的可能用的多荒适。
1、vue的自定義指令开镣，顧名思義就是自己定義一個(gè)指令類似于v-for刀诬、v-if這種澈蚌，實(shí)現(xiàn)指定的功能章姓，使用和原有指令一樣，又分為全局指令共郭，局部指令树埠。
全局指令
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部指令
data(){
return {
}
}
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
},
methods:{
}
2糠馆、vue的自定義指令有三個(gè)鉤子函數(shù)（類似于生命周期）bind（只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用怎憋，初始化調(diào)用）又碌、inserted（被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用）、update（所在組件的 VNode（虛擬dom） 更新時(shí)調(diào)用）绊袋、componentUpdated（指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用）毕匀、
unbind（只調(diào)用一次，指令與元素解綁時(shí)調(diào)用癌别。）
3皂岔、鉤子函數(shù)會(huì)被傳入以下參數(shù)：el（當(dāng)前dom元素）、binding（一個(gè)對(duì)象展姐，包含綁定的值value和name等）
4躁垛、實(shí)現(xiàn)懶加載剖毯，先注冊(cè)一個(gè)局部指令v-lazy，在inserted鉤子函數(shù)中監(jiān)聽(tīng)滾動(dòng)教馆，當(dāng)當(dāng)前元素的offsetTop小于屏幕的高度加上滾動(dòng)的高度時(shí)將真實(shí)的圖片路徑給src>
directives:{
lazy:{
inserted(el,binding){
function fun(){
let H=window.innerHeight;
let st=document.body.scrollTop||document.documentElement.scrollTop;
if(el.offsetTop<=H+st+200){
el.src=binding.value;
window.removeEventListener("scroll",fun);//解決資源再次請(qǐng)求
}
}
fun();
window.addEventListener("scroll",fun)
}
}
},
