js懒加载

最新推荐文章于 2025-05-17 09:06:35 发布

原创最新推荐文章于 2025-05-17 09:06:35 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #懒加载

学习同时被 3 个专栏收录

47 篇文章

订阅专栏

知识点

45 篇文章

订阅专栏

get

44 篇文章

订阅专栏

懒加载条件（img 出现在窗口位置）

img.offsetTop < window.innerHeight + document.body.scrollTop;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            display: block;
            width: 700px;
            height: 400px;
        }
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <ul class="img-group">
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
       </ul>
       <script type="text/javascript">
        var imgs = document.querySelectorAll('img');
        loadImg()
        window.onscroll = function(){
          loadImg()
        }
        function loadImg(){
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var winTop = window.innerHeight;
            for(var i=0;i < imgs.length;i++){
                if(imgs[i].offsetTop < scrollTop + winTop ){
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }
    </script>
</body>
</html>

函数节流（通过setTimeout定时器实现）

函数节流就是针对调用频率高的函数，通过设置定时器，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。

(最常见的一些需要节流的事件：onresize，scroll，mousemove ,mousehover，因为这些事件会在页面中频繁被触发)

 <script type="text/javascript">
        var imgs = document.querySelectorAll('img');
      window.onload=function(){
        throttle(lazyLoad(),200);
      }

      function lazyLoad(){
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var winTop = window.innerHeight;
            for(var i=0;i < imgs.length;i++){
                if(imgs[i].offsetTop < scrollTop + winTop ){
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }
        function throttle(method,delay){
            var timer = null;
            var context = this, //上下文
            args=arguments;     //函数参数
                clearTimeout(timer);
                timer=setTimeout(function(){
                    method.apply(context,args);
                },delay);
        }
        window.onscroll = function(){
            throttle(lazyLoad(),300);
        }
   </script>

IntersectionObserver 懒加载

 <script type="text/javascript">
        var imgs = document.querySelectorAll('img');
        window.onload = function () {
            io()
        }
        function io(){
            const io = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry && entry.isIntersecting) {
                        entry.target.src = entry.target.dataset.src
                        io.unobserve(entry.target)  //停止观察 接受一个element元素
                    }
                })
            })
            imgs.forEach(item => {
                io.observe(item)  //开始观察，接受一个DOM节点对象
            })
        }
    </script>