在網頁中引用大量圖片或者視頻，可能會拖慢網頁加載速度，影響用戶體驗。為了解決這一問題，我們可以使用“lazyload”技術。簡單來說，這項技術可以使得頁面在加載時，只加載當前視窗內的圖片或視頻，而不會加載整個頁面的所有資源。 html部分：

<img data-original="image.jpg" src="placeholder.jpg" class="lazy">

以上這段代碼就是實現“lazyload”的關鍵，我們為標簽添加了"data-original"屬性以及"src"屬性，將占位圖“placeholder.jpg”設置為圖片的初始狀態。接下來我們使用JavaScript來實現圖片的延遲加載。 js部分：

function lazyload() {
var lazy = document.getElementsByClassName('lazy');
for (var i = 0; i < lazy.length; i++) {
if (lazy[i].getBoundingClientRect().top <= window.innerHeight) {
lazy[i].src = lazy[i].dataset.original;
lazy[i].classList.remove('lazy');
}
}
}
window.addEventListener('load', lazyload);
window.addEventListener('scroll', lazyload);
window.addEventListener('resize', lazyload);

通過getElementsByClassName()函數來獲取帶有“lazy”類的元素，遍歷每一個元素并判斷其位置，如果圖片進入了視窗范圍內，則將"data-original"屬性的值賦給“src”屬性，并將"lazy"類刪除，防止圖片重復加載。 此外，我們也可以為視頻添加“lazyload”的功能。以下是視頻實現“lazyload”的代碼： html部分：

<video data-original="video.mp4" src="placeholder.jpg" class="lazy">

js部分：

function lazyload() {
var lazy = document.getElementsByClassName('lazy');
for (var i = 0; i < lazy.length; i++) {
if (lazy[i].getBoundingClientRect().top <= window.innerHeight) {
lazy[i].src = lazy[i].dataset.original;
lazy[i].load();
lazy[i].classList.remove('lazy');
}
}
}
window.addEventListener('load', lazyload);
window.addEventListener('scroll', lazyload);
window.addEventListener('resize', lazyload);

與圖片的實現類似，只需在