zoukankan      html  css  js  c++  java
  • js处理图片懒加载

    • 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)。
    • 判断是否存在于可视区   
    • 浏览器视口高度  (document.documentElement.clientHeight)
    • 待加载资源距离视口顶端位置
    • 通过以上两点即可判断图片是否位于可视区内。
    • 之后获取图片的真实地址
    • 把真实地址赋给图片

    源代码如下:

    if(window.addEventListener){
      document.write('add')
      window.addEventListener('scroll',lazyload);
    }else {
      window.attachEvent('onscroll',lazyload);
    }
    
    /*
     * params 
     * ele: class || id
     */
     imgLazy("#page")
    function imgLazy(ele) {
      let scrollElement = document.querySelector(ele);
      lazyload()
    }
    
    function lazyload(){
      let viewH = document.documentElement.clientHeight;
      let nodes = document.querySelectorAll('img[data-src]');
      Array.from(nodes).forEach((item,index) => {
        if(item.dataset.src==='') return;
        let rect = item.getBoundingClientRect();
        if(rect.bottom>=0 && rect.top < viewH){
              let img = new Image();
              img.onload = function(){
                item.src = img.src;
              }
              img.src = item.dataset.src
              item.dataset.src = ''
        }
      })
    }
    

      

  • 相关阅读:
    ●BZOJ 3894 文理分科
    ●BZOJ 1797 [Ahoi2009]Mincut 最小割
    ●BZOJ 1934 [Shoi2007]Vote 善意的投票
    ●BZOJ 3996 [TJOI2015]线性代数
    php--->self与static区别
    php--->使用callable强制指定回调类型
    php--->依赖注入(DI)实现控制反转(IOC)
    php--->cookie和session
    php--->注册模式
    linux---> siege压力测试工具使用
  • 原文地址:https://www.cnblogs.com/cq-lcq/p/8385270.html
Copyright © 2011-2022 走看看