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

青旅半醒 2022-09-13 04:03 146阅读 0赞

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

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

需要用到（load,scroll）事件

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

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

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

offset().top:[https://www.cnblogs.com/firstdream/p/5497307.html][https_www.cnblogs.com_firstdream_p_5497307.html]

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

data-src = 图片的真实地址

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

使用的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 = nowTime
            fn.call(this, arg)
          }
        }
      }

[https_www.cnblogs.com_firstdream_p_5497307.html]: https://www.cnblogs.com/firstdream/p/5497307.html