图片懒加载

依赖jquery
第一个函数：计算图片是否出现和消失在可视区

function isVisible(ele){
    let eleTop = ele.offset().top;
    let eleHeight = ele.outerHeight(true);
    let winScrollTop = $(window).scrollTop();
    let winHeight = $(window).height();
    let visible = false
    if(!(winScrollTop > eleTop+ eleHeight) && !(winScrollTop < eleTop - winHeight)) {
        
        visible = true
    }
    return visible
  }

 

第二个函数：获取所有图片，判断图片是否出现在可视区，如果出现，则给图片添加一个class

  function handleLazy(){
    // 图片懒加载
    let lazyDom = $('.xx-lazy');
    // 滚动条每次滚动都遍历判断元素是否到达可视区
    for(let i = 0; i<lazyDom.length; i++) {
      if(isVisible(lazyDom.eq(i))) {
        lazyDom.eq(i).addClass('xx-background-lazy');
      }
    }
  }
handleLazy()

 

第三：css

根据上面两个函数，会在class为xx-lazy的元素出现在可视区时，给元素添加class xx-background-lazy，所以需要在css中这样写：

/*这里是给模块添加fade动画*/
.xxx-lazy {
  /* transform: translateY(100px); */
  opacity: 0;
  transition: opacity .3s ease;
}
.xxx-lazy.xxx-background-lazy {
  /* transform: translateY(0px); */
  opacity: 1;
}

 

 

背景图设置 - 分1倍图和2倍图：

/*懒加载给元素添加了 xxx-background-lazy后，就可以运用到下面的样式了，通过css给元素添加背景图 */
.xxx-section5-img.xxx-background-lazy {

  /* pc */
  @media (min-width: 1000px) {
    background-image: url(../images/section5-pc-x1.jpeg);
  }
  @media (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) {
    background-image: url(../images/section5-pc-x2.jpeg);
  }

  /* mb */
  @media (max-width: 1000px) {
    background-image: url(../images/section5-mb-x1.jpeg);
  }
  @media (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) {
    background-image: url(../images/section5-mb-x2.jpeg);
  }
  
}
/* webp - 需要判断浏览器是否支持webp格式的图片，如果支持那么在html添加一个class='webp'，这样就可以运用下面的样式了 */
.webp .xxx-section5-img.xxx-background-lazy {
  /* pc */
  @media (min-width: 1000px) {
    background-image: url(../images/section5-pc-x1.jpeg.webp);
  }
  @media (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) {
    background-image: url(../images/section5-pc-x2.jpeg.webp);
  }

  /* mb */
  @media (max-width: 1000px) {
    background-image: url(../images/section5-mb-x1.jpeg.webp);
  }
  @media (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) {
    background-image: url(../images/section5-mb-x2.jpeg.webp);
  }
  
}

 

 

最后要注意div的写法：

<figure class="umx-section6-figure">
　<!-- 这个div就是图片 -->
  <div class="xxx-lazy xxx-background xxx-section5-img"></div>
  <figcaption class="umx-figcaption">这里写模块中的文字等</figcaption>
</figure>

 

 

div的样式：【（图片的宽/图片的高）* 100 = div的padding-bottom的百分比】

.xxx-section6-img {
  width: 100%;
  height: 0;
  padding-bottom: 53.95%;
   
  /* mb端的图片百分比 */
  @media (max-width: 1000px) {
    padding-bottom: 113.33%;
  }
}