zoukankan      html  css  js  c++  java
  • 图片的按需加载代码实现

    前言

    在带宽不够的情况下,我们可以通过让图片按需加载,来实现性能上的优化

    知识点

    getBoundingClientRect

    用于返回元素的大小和相对于视窗的位置。

     window.innerHeight

    用户获取文档显示区域的高度,包括滚动条

    document.documentElement.clientHeight

    获取文档可视高度

    实现

    我们要实现的是将img属性有lazy的图片,实现她们的按需加载,只有当图片滚动到可是区域后才会去加载它

    //获取元素是否在可视区域
        function isElementInViewport(el) {
    
          var rect = el.getBoundingClientRect();
          return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <=
            (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <=
            (window.innerWidth || document.documentElement.clientWidth)
          );
        }
    
        function checkImg() {
          let imgs = document.querySelectorAll("img[lazy]");
          Array.from(imgs).forEach(ele => {
            if (isElementInViewport(ele)) {
              loadImg(ele)
            }
          })
        }
    
        function loadImg(el) {
          if (!el.src) {
            let source = el.dataset.src;
            el.src = source;
          }
        }
    
    //使用
    <img data-src="myimg.png"  lazy>
  • 相关阅读:
    996工作制是奋斗还是剥削?
    动态链接的PLT与GOT
    The Product-Minded Software Engineer
    缓冲区溢出
    golang的加法比C快?
    C errno是否是线程安全的
    golang 三个点的用法
    GDB 单步调试汇编
    为什么CPU需要时钟这种概念?
    fliebeat配置手册
  • 原文地址:https://www.cnblogs.com/liuXiaoDi/p/13069681.html
Copyright © 2011-2022 走看看