圖片懶加載 作用 : (圖片使用延遲加載在可提高網頁下載速度。它也能幫助減輕服務器負載)
當我們頁面滑動到可視區域，再顯示圖片。
我們使用jquery插件庫EasyLazyload。 注意，此時的 js 引入文件和js調用必須寫到DOM元素 (圖片) 最后面
在這個網址搜索圖片懶加載 : (https://www.jq22.com/) EasyLazyload.min.js
img 的 src 屬性 必須改為 data-lazy-src
代碼示例 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
width: 600px;
height: 400px;
margin: 0 auto;
display: block;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<img data-lazy-src="img/公司2.jpg">
<img data-lazy-src="img/公司3.jpg">
<img data-lazy-src="img/公司4.jpg">
<img data-lazy-src="img/公司5.jpg">
</div>
<script src="../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/EasyLazyload.min.js" type="text/javascript" charset="utf-8"></script>
<script>
lazyLoadInit({
showTime: 1100,
onLoadBackEnd: function(i, e) {
console.log("onLoadBackEnd:" + i);
},
onLoadBackStart: function(i, e) {
console.log("onLoadBackStart:" + i);
}
});
</script>
</body>
</html>