要在網(wǎng)頁中引入 LazyLoad.js,請按照以下步驟操作:
首先,從 LazyLoad 的官方網(wǎng)站(https://github.com/aFarkas/lazysizes)下載最新版本的 LazyLoad.js 文件。你也可以使用包管理工具(如 npm 或 yarn)來安裝它。
將下載的 LazyLoad.js 文件上傳到你的網(wǎng)站服務(wù)器,確保它位于可以訪問的目錄中。
在你的 HTML 文件中,使用 <script>
標(biāo)簽引入 LazyLoad.js。確保在引入其他依賴 LazyLoad 的腳本之前引入它。例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LazyLoad Example</title>
</head>
<body>
<!-- 引入 LazyLoad.js -->
<script src="path/to/lazysizes.min.js" async></script>
<!-- 引入其他依賴 LazyLoad 的腳本 -->
<script src="path/to/your-script.js"></script>
</body>
</html>
data-src
屬性,而不是直接使用 src
屬性。例如:.lazyload {
width: 100px;
height: 100px;
}
<img class="lazyload" data-src="path/to/your-image.jpg" alt="Lazy loaded image">
data-src
屬性的圖片,并在它們進(jìn)入視口時加載它們。你可以在你的 JavaScript 文件中使用 lazyload()
函數(shù)來觸發(fā)懶加載,或者讓 LazyLoad.js 自動處理。document.addEventListener("DOMContentLoaded", function() {
// 讓 LazyLoad.js 自動處理懶加載
lazyload();
});
或者
document.addEventListener("DOMContentLoaded", function() {
// 使用 lazyload() 函數(shù)手動觸發(fā)懶加載
lazyload('img.lazyload');
});
現(xiàn)在你已經(jīng)成功地在網(wǎng)頁中引入了 LazyLoad.js,并實(shí)現(xiàn)了圖片的懶加載功能。