原生JS实现图片懒加载(lazyload)实例

图片懒加载：原生JS实现与优化

前言

在网页开发中，图片懒加载是一种常见的性能优化手段。通过懒加载，我们可以确保用户首先加载的是首屏内容，而后续滚动时按需加载图片，从而提高页面加载速度和用户体验。本文将介绍原生JS实现图片懒加载的实例，并附带详细代码供读者参考。

一、实现原理

图片懒加载的主要原理是将图片的src属性设为一个默认值（如占位图），然后监听窗口滚动事件。当图片进入视窗时，再将其src属性替换为真实的图片地址。这样可以保证首屏的加载速度，并按需加载图片。

二、具体代码实现

1. HTML结构

在渲染时，为图片设置默认图片，并将真实地址放在data-属性上。

2. 监听滚动事件

使用window.onscroll来监听滚动事件。为了提高性能，可以使用节流（throttle）或防抖函数（debounce）来控制事件触发频率。这里我们采用节流函数来实现。

window.onscroll = _.throttle(this.watchscroll, 200);

watchscroll函数的具体实现如下：

watchscroll () {

var bodyScrollHeight = document.body.scrollTop; // body滚动高度

var windowHeight = windownerHeight; // 视窗高度

var imgs = document.getElementsByClassName('lazyloadimg');

for (var i = 0; i < imgs.length; i++) {

var imgHeight = imgs[i].offsetTop; // 图片距离顶部高度

if (imgHeight < windowHeight + bodyScrollHeight) {

imgs[i].src = imgs[i].getAttribute('data-src'); // 替换图片地址

imgs[i].className = imgs[i].className.replace('lazyloadimg',''); // 移除lazyloadimg类

}

}

}

三、补充内容

1. 页面滚动离开首屏的判断（可显示回到顶部的按钮）

document.body.scrollTop > windownerHeight

2. 页面滚动到底部的判断（可加载更多内容）

window.scrollY + windownerHeight > document.body.offsetHeight

本文介绍了原生JS实现图片懒加载的方法，包括实现原理、具体代码以及补充内容。通过懒加载，我们可以提高页面加载速度，提升用户体验。希望本文的内容对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。以上内容仅为简要介绍，如需了解更多关于图片懒加载的知识，请继续深入研究相关资料。