jQuery鎳掑姞杞芥彃浠秊query.lazyload.js鏄竴娆剧敤浜庡欢杩熷姞杞藉浘鐗囩殑鎻掍欢锛屽綋椤甸潰婊氬姩鍒版寚瀹氫綅缃椂锛屽啀鍔犺浇鍥剧墖锛屽彲浠ユ湁鏁堟彁鍗囬〉闈㈠姞杞介€熷害鍜岀敤鎴蜂綋楠屻€備笅闈㈡槸涓€涓娇鐢ㄨ鏄庡疄渚嬶細

棣栧厛锛屽湪HTML椤甸潰涓紩鍏Query搴撳拰jquery.lazyload.js鎻掍欢鐨勬簮鏂囦欢锛?/p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.lazyload.js"></script>

鐒跺悗锛屽湪闇€瑕佸欢杩熷姞杞界殑鍥剧墖涓婃坊鍔?quot;lazyload"绫诲拰"data-src"灞炴€э紝"data-src"灞炴€ф寚瀹氬浘鐗囩殑鐪熷疄鍦板潃锛?/p>

<img class="lazyload" data-src="image.jpg" alt="Image">

鎺ョ潃锛屼娇鐢╦Query鐨剅eady鏂规硶鏉ュ垵濮嬪寲鎳掑姞杞芥彃浠讹細

$(document).ready(function() {
  $("img.lazyload").lazyload();
});

鏈€鍚庯紝鍦–SS涓缃粯璁ょ殑鍗犱綅鍥撅紝浠ヤ究鍦ㄥ浘鐗囧姞杞藉墠鏄剧ず锛?/p>

.lazyload {
  background: url(placeholder.jpg) no-repeat center center;
}

杩欐牱锛屽綋椤甸潰婊氬姩鍒板浘鐗囦綅缃椂锛屾彃浠朵細鑷姩鍔犺浇鍥剧墖锛屾浛鎹㈠崰浣嶅浘銆?/p>

闇€瑕佹敞鎰忕殑鏄紝鎳掑姞杞芥彃浠惰繕鏈変竴浜涘彲閫夐厤缃」锛屽彲浠ユ牴鎹渶瑕佽繘琛岃缃€備緥濡傦紝鍙互閫氳繃璁剧疆threshold锛堥槇鍊硷級鏉ユ帶鍒跺浘鐗囧姞杞界殑鎻愬墠閲忥細

$("img.lazyload").lazyload({
  threshold: 200 // 鎻愬墠200鍍忕礌鍔犺浇鍥剧墖
});

鍙﹀锛屾彃浠惰繕鎻愪緵浜嗕竴浜涗簨浠跺洖璋冨嚱鏁帮紝鍙互鍦ㄥ姞杞藉墠銆佸姞杞戒腑鍜屽姞杞藉悗鎵ц鑷畾涔夌殑鎿嶄綔銆傝缁嗙殑閰嶇疆鍜屼娇鐢ㄨ鏄庡彲浠ュ弬鑰僯query.lazyload.js鐨勫畼鏂规枃妗ｃ€?/p>