寤惰繜鍔犺浇闂鎻忚堪缃戠珯涓婄殑鍥剧墖寰堝銆傚鏋滅洿鎺ヤ竴娆℃€ц姹傛墍鏈夊浘鐗囪祫婧愶紝鏄剧劧绛夊緟鏃堕棿杩囬暱锛岃祫婧愭氮璐广€傛墍浠ユ垜浠渶瑕佸鍥剧墖鍋氫竴涓噿鍔犺浇锛屽嵆锛氱瓑鍒扮湅鍒板浘鐗囷紝鎴栬€呭揩瑕佺湅鍒板浘鐗囩殑鏃跺€欏啀鍔犺浇銆傚氨鍍忕Щ鍔ㄧ鐨勪笅鎷夊姞杞戒竴鏍凤紝涔熸湁涓€绉嶆暟鎹垎椤电殑鎰熻銆傝В鍐虫噿鍔犺浇闂鐨勭涓€姝ワ紝涓€寮€濮嬪厛缁欏浘鐗囦竴涓猯oading.gif浣滀负img鐨剆rc鍊硷紝璁╁畠鏄剧ず鍔犺浇锛屽锛歩mg.src=loading.gif绗簩姝ユ槸鍒ゆ柇鍏冪礌鏄惁杩涘叆瑙嗗彛锛屾槸鍚﹀彲浠ヨ鏌ョ湅锛堝緢蹇級锛岀劧鍚庡皢img鐨剆rc鐨勫€兼浛鎹负鐪熷疄闇€姹傝姹傚湴鍧€鐨勫€笺€係tep3.褰搃mg鏈塻rc鐨勫€兼椂锛屼細绔嬪嵆鍙戦€佽姹傝姹傛湇鍔″櫒鐨勮祫婧愩€傚鏋滆姹傛垚鍔燂紝鍒欐垚鍔燂紝杈惧埌鎴戜滑鎯宠鐨勬晥鏋溿€傜鍥涙鏄姱閿欍€傚鏋滃浘鐗囧姞杞借姹傚け璐ワ紝鍒欏皢img鐨剆rc鏇挎崲涓哄姞杞藉け璐ョ殑鍥剧墖src銆?濡備綍鍒ゆ柇鍏冪礌鏄惁杩涘叆鍙鍖哄煙锛熼棶棰?锛氬浣曞垽鏂浘鐗囧姞杞芥垚鍔熸垨澶辫触锛熷悗闈細鎻愬埌杩欎袱涓棶棰樼殑绛旀锛岃缁х画鐪嬪浘鐗囩殑鎳掑姞杞芥晥鏋滐紝鏈€缁堝疄鐜拌繖涓晥鏋?#/img...瑙ｅ喅鏂规硶瑕佷箞浣跨敤宸叉湁鐨勬彃浠讹紝瑕佷箞鑷繁鍐欎竴涓В鍐虫柟妗?鑷繁鎻掔數锛乿ue-lazyload鎺ㄨ崘浣跨敤vue-lazyload鎻掍欢锛屽悇鏂归潰閮借繘琛屼簡浼樺寲銆傚畼鏂瑰湴鍧€锛歨ttps://www.npmjs.com/package...浣跨敤姝ラ锛岃繖閲屽氨涓嶈禈杩颁簡锛屼笂闈㈢殑鏁堟灉鍥句篃鏄€氳繃杩欎釜vue-lazyload鎻掍欢瀹炵幇鐨勶紝瀵瑰簲鐨勪唬鐮佸湪浣滆€呯殑github浠撳簱锛歨ttps://github.com/shuirongsh...鏂规2鎵嬪伐鍐欒嚜瀹氫箟鎸囦护v-lazyload鍐欒嚜瀹氫箟鎸囦护鏂逛究閫昏緫澶嶇敤濡備綍鍒ゆ柇鍏冪礌鏄惁杩涘叆瑙嗗彛锛熸瘮杈冮夯鐑︾殑鏂规锛氱洃鍚甫婊氬姩鏉＄殑scroll浜嬩欢锛岃绠楀厓绱犲埌甯︽粴鍔ㄦ潯鐨勪綅缃殑璺濈銆傚湪杩欓噷锛屼綔鑰呮€荤粨浜嗕竴涓叕寮忥細婊氬姩璺濈=.target鍒伴《閮ㄧ殑楂樺害-.scrollBox椤堕儴鐨勯珮搴?.scrollBox鏈韩鐨勯珮搴︽垨鑰呰竟鐣屽€?鐩爣鍏冪礌璺濈椤堕儴鐨勯珮搴?婊氬姩妗嗗鍣ㄧ殑楂樺害from婊氬姩妗嗗鍣ㄨ嚜韬殑top-height绫绘瀯閫犲嚱鏁帮紝鍒ゆ柇鍏冪礌鏄惁杩涘叆瑙嗗彛IntersectionObserver鏄竴涓緢寮哄ぇ鐨刟pi锛屽彲浠ヨ瀵熷埌寰堝涓滆タ鐨勫彉鍖栵紝寰堝ソ锛岀幇鍦ㄦ祻瑙堝櫒鐗堟湰涓嶆柇鏇存柊杩唬锛屽吋瀹规€у凡缁忓緢濂斤紝鍙互鏀惧績浣跨敤鍏充簬IntersectionObserver鐨勮娉曪紝绗旇€呭氨涓嶈禈杩颁簡锛屾垜浠洿鎺ヤ笂浼犺嚜瀹氫箟鍛戒护浠ｇ爜锛岃嚜瀹氫箟鍛戒护浠ｇ爜//letloadimage="http://ashuai.work:10000/imgGifSrc/loading.gif"//serverloadingimage//leterrorimage="http://ahuai.work:10000/imgGifSrc/error.gif"//serverloadingimageletloadimage=require('../../assets/imgLazyload/loading.gif')//鏈湴鍔犺浇鍥剧墖leterrormage=require('../../assets/imgLazyload/error.gif')//鏈湴鍔犺浇澶辫触鍥剧墖exportdefault{inserted(el,binding,vnode){//1.璁╁浘鐗囧厛鏄剧ずloading...el.src=loadimage.default//2.瀹炰緥鍖栦竴涓細Observerconstobserver=newIntersectionObserver((entries)=>{//4.鍦ㄥ搴旂殑鎵ц鍑芥暟涓幏鍙杘bserver鍘籭sIntersecting灞炴€?鏄惁鐩镐氦)letisIntersecting=entries[0].isIntersecting//5.濡傛灉鐩镐氦锛岃瀹冨姞杞絪rc瀵瑰簲鐨勭湡瀹炲湴鍧€if(isIntersecting){el.src=binding.value//6.濡傛灉鍔犺浇鎴愬姛锛屼笉鐢ㄦ媴蹇僥l.onload=(res)=>console.log('鍔犺浇鎴愬姛',res);//7.濡傛灉鍔犺浇澶辫触锛屽氨涓洪敊璇殑鍥剧墖鍋氫竴涓崰浣嶇el.onerror=(err)=>{console.log('鍔犺浇澶辫触',err);el.src=errormage.default}//8.鏃犺鍔犺浇鎴愬姛杩樻槸澶辫触锛岃瀵熶换鍔￠兘鍋滄observer.unobserve(el)}})//3.璁╄瀵熻€呰瀵焛mg鏍囩observer瀵瑰簲鐨勫浘鍍?observe(el)},}濡傛灉浣跨敤浠ｇ爜锛岄潪甯哥畝鍗曠洿鎺ワ細
