js 小案例 实现图片的懒加载

加载"/>

js 小案例 实现图片的懒加载

懒加载：顾名思义，大大的提高用户的体验节省不必要的资源浪费以及网站性能的提高

用于：图片较多的网站，如京东，淘宝，千图网等，图片量比较多，

需要用到（load,scroll）事件

你需要知道几个参数的意思 ：

outerHeight()：返回本身盒子的高度，包括边框哦

scrollTop()：滚动条卷上去的内容高度

offset().top:.html

需要加载的图片设置，如下

data-src = 图片的真实地址

lazy-load = 全部要懒加载的图片都设置的公用class

 <img src=""  data-src='./images/po2.webp'  class="lazy-load">

使用的jq来实现   可以根据自己的实际情况更改

// 实现图片的懒加载问题
var $lazyload = $('.lazy-load'),$window = $(window);$window.on('load scroll', function () {//$B 获取浏览器底边框距离body的距离var $B = $window.outerHeight() + $window.scrollTop();//循环每张图片区域,根据自己区域距离boody距离  计算里面的图片是否加载 $lazyload.each((index, item) => {var $item = $(item),$itemA = $item.outerHeight() + $item.offset().top;console.log($item)$isLoad = $item.attr('isLoad');if ($itemA <= $B && $isLoad !== 'true') {$item.attr('isLoad', true)//获取当前item中的img$item.attr('src', $item.attr('data-src'))//判断img是否加载成功$item.on('load', () => $item.stop().fadeIn());}})})

也可以添加节流

// 实现图片的懒加载问题
var $lazyload = $('.lazy-load'),$window = $(window);
$window.on('load scroll',throttle(lazy,300))
function lazy () {console.log(1);//$B 获取浏览器底边框距离body的距离var $B = $window.outerHeight() + $window.scrollTop();//循环每张图片区域,根据自己区域距离boody距离  计算里面的图片是否加载 $lazyload.each((index, item) => {var $item = $(item),$itemA = $item.outerHeight() + $item.offset().top;$isLoad = $item.attr('isLoad');if ($itemA <= $B && $isLoad !== 'true') {$item.attr('isLoad', true)//获取当前item中的img$item.attr('src', $item.attr('data-src'))//判断img是否加载成功$item.on('load', () => $item.stop().fadeIn());}})
}
// 节流  在固定的时间执行一次
function throttle(fn, dealy) {var lastTime = ""return function (arg) {let nowTime = new Date().getTime()if (nowTime - lastTime > dealy) {lastTime = nowTimefn.call(this, arg)}}}