一、效果介绍

懒加载效果长沙网站建设一般在页面上图片非常多,且图片占用空间很大时使用.

这个可以让不在显示区域的图片先不进行加载,让浏览器腾出更多空间来加载首屏的内容,可以明显的提高页面加载速度,让用户不会因为加载时间太久而退出页面.

二、核心代码展示

具体代码图如上:

页面基础框架很简单,只需要有放置图片的容器就可以,再使用css控制下图片的样式.实现这个效果的核心还是在js上:

长沙网站制作使用IntersectionObserver来监听所有带有data-src属性的图片.在用户滚动鼠标滚轮,让页面向下运动,使得马上要出现的图片的data-src,赋值给src属性触发图片开始加载.同时添加新的类名给图片,触发css的过渡效果使图片更加流畅的出现.

核心代码：

img.src = img.dataset.src;
img.classList.add('loaded');
observer.unobserve(img);

三、效果视频展示：

四、应用与扩展

懒加载效果在任何地方都可以使用,比如淘宝京东这类商城里,页面中会有非常多的产品图片,这时将这个效果应用上来就可以明显的加快页面加载,让用户能更快的看到产品图片,从而提示成交率.

扩展方面,其实不只是图片,也可以将懒加载用在视频上.让它在页面加载时只显示封面图,当视频进入显示区域时再开始加载.让页面打开的速度更加迅速,也能提升用户的体验感.

上述内容就是长沙网站开发整理出的图片懒加载效果的制作方法,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.