HTML5 圖片滾動加載特效代碼 HTML5 中提供了許多新的 API 和特性，其中之一就是圖片滾動加載特效。使用這個特性可以實(shí)現(xiàn)圖片懶加載，當(dāng)用戶滾動頁面時，圖片才會逐漸加載出來。這種方式可以有效地減少初始頁面加載時間，提高網(wǎng)站性能。 下面是一個簡單的圖片滾動加載特效代碼示例：

以下是 HTML 代碼：

<div id="image-list">
<img data-src="image-1.jpg">
<img data-src="image-2.jpg">
<img data-src="image-3.jpg">
<img data-src="image-4.jpg">
<img data-src="image-5.jpg">
<img data-src="image-6.jpg">
<img data-src="image-7.jpg">
<img data-src="image-8.jpg">
<img data-src="image-9.jpg">
<img data-src="image-10.jpg">
</div>

以下是 JavaScript 代碼：

var imageList = document.getElementById('image-list');
var images = imageList.getElementsByTagName('img');
var windowHeight = window.innerHeight;
function lazyLoadImages() {
for (var i = 0; i< images.length; i++) {
var image = images[i];
var rect = image.getBoundingClientRect();
if (rect.top<= windowHeight && rect.bottom >= 0) {
image.src = image.dataset.src;
images.splice(i, 1);
i--;
}
}
}
document.addEventListener('scroll', lazyLoadImages);

在上面的例子中，我們首先獲取包含圖片的 div 元素和其中的圖片元素。然后我們?yōu)闈L動事件注冊一個監(jiān)聽器，并在監(jiān)聽器中檢查哪些圖片元素已經(jīng)進(jìn)入了視口區(qū)域。如果圖片元素已經(jīng)進(jìn)入視口區(qū)域，就將它的 data-src 屬性賦值給 src 屬性，這樣就能讓圖片開始加載了。 需要注意的是：我們使用了圖片的 data-src 屬性，而不是 src 屬性，這是因?yàn)樵诔跏技虞d時，我們不希望瀏覽器去加載圖片，而是希望在適當(dāng)?shù)臅r候才去加載。 以上就是一個簡單的圖片滾動加載特效代碼示例。如果你想使用這種方式來加載你的圖片，可以將這個示例代碼修改成你需要的形式，嵌入到你的網(wǎng)站中。