2024年04月12日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
大部分网站,都会给部分文章图片或者封面图片添加一个懒加载效果,从而减少一次性向服务器进行大量请求。
下面,鹏仔就给大家讲解下给网站添加懒加载教程,其实就是将图片src赋值为一张指定的图片,当用户滚动滚动条到可视区域图片时候,再去加载真正的图片。
css代码(鹏仔只是给图片设置了一个大小,具体自己设置)
<style> img { display: block; margin-bottom: 10px; width: 100px; } </style>
HTML代码
<body> <img src="指定的图片路径" data-src="最终要显示的图片路径"> <img src="指定的图片路径" data-src="最终要显示的图片路径"> <img src="指定的图片路径" data-src="最终要显示的图片路径"> <img src="指定的图片路径" data-src="最终要显示的图片路径"> <img src="指定的图片路径" data-src="最终要显示的图片路径"> </body>
在img标签中,把原本src指向的图片路径改为指定的一张图,在继续在img标签中 加上 data-src 将他指向最终要显示的图
src 为路径
data-src 为自定义属性
JS代码
<script> //函数绑定在 scroll 事件上,当页面滚动时,避免函数被高频触发, function throttle(fn, delay, atleast) { //进行去抖处理 var timeout = null, startTime = new Date(); return function() { var curTime = new Date(); clearTimeout(timeout); if(curTime - startTime >= atleast) { fn(); startTime = curTime; }else { timeout = setTimeout(fn, delay); } } } function lazyload() { var images = document.getElementsByTagName('img'); var len = images.length; //存储图片加载到的位置,避免每次都从第一张图片开始遍历 var n = 0; return function() { var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i = n; i < len; i++) { if(images[i].offsetTop < seeHeight + scrollTop) { if(images[i].getAttribute('src') === '指定的图片路径') { images[i].src = images[i].getAttribute('data-src'); } n = n + 1; } } } } var loadImages = lazyload(); //初始化首页的页面图片 loadImages(); window.addEventListener('scroll', throttle(loadImages, 500, 1000), false); //函数节流(throttle)与函数去抖(debounce)处理, //500ms 的延迟,和 1000ms 的间隔,当超过 1000ms 未触发该函数,则立即执行该函数,不然则延迟 500ms 执行该函数 </script>
本文链接:http://so.lmcjl.com/news/1883/