jquery实现图片懒加载

最新推荐文章于 2024-07-23 03:58:13 发布

马优晨

最新推荐文章于 2024-07-23 03:58:13 发布

阅读量550

点赞数

分类专栏： vue 小技巧文章标签： jquery实现图片懒加载 vue实现图片懒加载 vue使用lazyload jquery使用lazyload vue中使用jquery懒加载插件

本文链接：https://blog.csdn.net/qq_24147051/article/details/98029097

版权

小技巧同时被 2 个专栏收录

133 篇文章 4 订阅

订阅专栏

vue

90 篇文章 14 订阅

订阅专栏

在这里插入图片描述

实现一个懒加载，效果如上所示

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试懒加载</title>
</head>
<style>
  ul,
  li {
    list-style: none;
  }

  .container {
    width: 600px;
    margin: 0 auto;
  }

  .container li {
    float: left;
    margin: 10px 10px;
  }

  .container li img {
    width: 240px;
    height: 180px;
  }

  p {
    float: left;
  }
</style>

<body>
  <ul class="container">
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" /></a></li>
    <li><a href="#"><img src="https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png"
          data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" /></a></li>
  </ul>
</body>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script>
  var clock; //这里的clock为timeID，
  $('.container img').each(function () {
    if (checkShow($(this)) && !isLoaded($(this))) {
      loadImg($(this));
    }
  })
  lazyRender();

  $(window).on('scroll', function () {
    if (clock) { // 如果在300毫秒内进行scroll的话，都会被clearTimeout掉，setTimeout不会执行。
      //如果有300毫秒外的操作，会得到一个新的timeID即clock，会执行一次setTimeout,然后保存这次setTimeout的ID，
      //对于300毫秒内的scroll事件，不会生成新的timeID值，所以会一直被clearTimeout掉，不会执行setTimeout.
      clearTimeout(clock);
    }
    clock = setTimeout(function () {
      console.log('运行了一次');
      lazyRender();
    }, 300)
  })

  function lazyRender() {
    $('.container img').each(function () {
      if (checkShow($(this)) && !isLoaded($(this))) {
        loadImg($(this));
      }
    })
  }

  function checkShow($img) { // 传入一个img的jq对象
    var scrollTop = $(window).scrollTop(); //即页面向上滚动的距离
    var windowHeight = $(window).height(); // 浏览器自身的高度
    var offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置

    if (offsetTop <= (scrollTop + windowHeight) && offsetTop >= scrollTop) { //在2个临界状态之间的就为出现在视野中的
      return true;
    }
    return false;
  }

  function isLoaded($img) {
    return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
  }

  function loadImg($img) {
    $img.attr('src', $img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
  }
</script>

</html>

在vue中使用这个项目插件

目的：

将项目中的图片先替换成默认图片，等待图片加载好了，在进行替换。

HTML


 <div class="news-content">
     XXXXXXXXXXXXXXX
  </div>

var app = new Vue({
    el: '#app',
    data: {
        clock: ""
    },
    mounted: function () {
        $('.news-content img').each(function () {
            let self = $(this);
            $(this)
                .attr('data-src', self.attr('src'))
                .attr('src', 'https://img.dota2.com.cn/file/2a/aa/2aaa24d93c114750a54be2994ed2d7de1564455694.png');
        })
        this.lazyLoad();
        this.scrollLoad();
    },
    methods: {
        scrollLoad() {
            let self = this;
            $(window).on('scroll', function () {
                if (self.clock) {
                    clearTimeout(self.clock);
                }
                self.clock = setTimeout(function () {
                    self.lazyRender();
                }, 300)
            })
        },
        lazyLoad() {
            let self = this;
            $('.news-content img').each(function () {
                if (self.checkShow($(this)) && !self.isLoaded($(this))) {
                    self.loadImg($(this));
                }
            })
        },
        lazyRender() {
            let self = this;
            $('.news-content  img').each(function () {
                if (self.checkShow($(this)) && !self.isLoaded($(this))) {
                    self.loadImg($(this));
                }
            })
        },
        checkShow($img) { // 传入一个img的jq对象
            let scrollTop = $(window).scrollTop(); //即页面向上滚动的距离
            let windowHeight = $(window).height(); // 浏览器自身的高度
            let offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置

            if (offsetTop <= (scrollTop + windowHeight) && offsetTop >= scrollTop) { //在2个临界状态之间的就为出现在视野中的
                return true;
            }
            return false;
        },
        isLoaded($img) {
            return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
        },
        loadImg($img) {
            $img.attr('src', $img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
        }
    }
});