【JavaScript】图片懒加载

爱做梦
368 阅读2分钟

为什么要图片懒加载？

为了避免一次性向服务器发送大量请求而造成页面阻塞，我们需要控制请求数量，按照我们需要的量去加载图片。

原理

图片的加载是依赖于img标签的src路径，我们可以设置一个暂存器，把图片的路径放到暂存器中，当我们需要这个图片加载显示时，再把路径赋值给src，这样就能实现按需加载，也就是图片懒加载。（html5中常把data-属性作为暂存器）

优点

提高前端性能，按需加载图片可以减轻服务器压力，防止页面因加载而导致的阻塞，提高页面加载速度。

实现

jQuery

  • 准备工作
    使用懒加载时，我们把src设置为默认的图片，data-img是自定义属性，用于存放图片真实的路径。

  • 什么时候加载图片？什么时候又不需要？
    在可视区域中，加载图片

  • 怎样判断图片是否在可视区域？
    利用元素的偏移高度（offsetTop）,对比设备宽度(window.height)+滚动条高度(scrollTop)来判断是否处于可视区域内

图片在可视区域如下： 144.png

图片不在可视区域如下：

15.png

  • 根据上面的图片总结：
    图片的offsetTop基本不变，如果设备高度加上滚动条与顶部的距离大于或等于图片的偏移高度，则图片就在可视区内。即： img.offset().top<=window.height()+window.scrollTop()

  • html：

<div class="img">
    <img src="./loading.png" data-lazyload="https://dpic3.tiankong.com/67/cn/QJ6226943363.jpg@!350h">
    <img src="./loading.png" data-lazyload="https://dpic1.tiankong.com/zt/sg/QJ6235849453.jpg@!350h">
    <img src="./loading.png" data-lazyload="https://dpic1.tiankong.com/ul/ac/QJ6479383109.jpg@!350h">
    <img src="./loading.png" data-lazyload="https://dpic2.tiankong.com/1z/kb/QJ6401246638.jpg@!350h">
    <img src="./loading.png" data-lazyload="https://dpic1.tiankong.com/ut/zj/QJ6634256101.jpg@!350h">
  </div>
  • javascript
//  第一次加载
    getImg();
    
    //  设置一个延时函数节流
    var clock; 
​
    // 滚动事件
    $(window).on('scroll', () => {
        if (clock) {
            //  如果拉动滚动条时，延时函数还未执行完，则清除
            clearTimeout(clock);
        }
        clock = setTimeout(() => {
            getImg();
        }, 2000)
        // 2秒加载一次图片
    })
​
    function getImg() {
        // 返回没有data-isLoaded的img标签
        // [1,2,3].not(1) => 返回不含有1的数组 [2,3]
        $('.img img').not('[data-isLoading]').each((index,item) => {
            if(isShow(item)) loading(item);
        })
    }
​
    // 判断图示是否在可视区域
    function isShow(img) {
        return $(img).offset().top <= $(window).height() + $(window).scrollTop()
    }
​
    // 将img的src换成data-isLoaded的值
    function loading(img) {
        $(img).attr('src', $(img).attr('data-lazyload'));
        //  为已经加载的图片加一个标识，上面遍历图片的时候就会跳过已经加载了的图片，防止加载过的图片再加载
        $(img).attr('data-isLoaded', 1);
    }

JQuery插件(jquery.lazyload)

  • html
// img图片
<img class='img' data-original="https://dpic3.tiankong.com/67/cn/QJ6226943363.jpg@!350h">

// 背景图懒加载
<div data-original="图片的地址" class='img'>
  • javascript
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.3/jquery.lazyload.min.js"></script>
<script type="text/javascript">
​
    $(".img").lazyload({     
      placeholder : "./loading.gif",  //用图片提前占位，加载时显示的图片
         // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
      
      effect: "fadeIn",  // 载入使用何种效果
         // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn 
         
      event:'click',  // 事件触发时才加载
      
      container:$('#container'), // 对容器中的图片实现效果 
         // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
       
      threshold: 200, // 提前开始加载
         // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
    });
</script>

Vue中的vue_lazyload

npm install vue-lazyload --save
  • 全局注册（main.js）
// 引入插件
import VueLazyLoad from 'vue-lazyload'
// 注册插件
Vue.use(VueLazyLoad, {
  preLoad: 1,  //距离页面底部距离的百分比，默认值为1.3
  error: require('./assets/img/error.jpg'),  // 加载错误时，显示的图片
  loading: require('./assets/img/homePage_top.jpg'),  // 加载时显示的图片
  attempt: 2,  // 加载错误后最大尝试次数
})
  • lazyloadDemo.vue(组件中)使用
  <div class="lazyLoad">
    <ul>
      <li v-for="img in 图片地址数组">
        <img v-lazy="img" :key='img'>
        // :key=""  必须要加，否则就会出现，页面刷新，其他内容都刷新了，但是只有图片不刷新的情况 。因为key可能相同，所以页面不会更新
      </li>
    </ul>
  </div>
  • 总结 img标签中使用懒加载：v-lazy代替v-bind:src
    背景图片中使用懒加载：v-lazy:background-image=''

最后

参考博客：www.cnblogs.com/Raincost-Z/… blog.csdn.net/halo1416/ar…

本文章仅为自己学习时的笔记，仅从参考，对博客文章的参考，若原文章博主介意，请联系我删除！！！

avatar
文章
阅读
粉丝