实现图片懒加载

最新推荐文章于 2020-08-08 00:40:06 发布

H_x

最新推荐文章于 2020-08-08 00:40:06 发布

阅读量152

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_43650979/article/details/106494815

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

计算图片是否进入可视区

在这里插入图片描述

实现

<!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>
    <style>
        img {
            display: block;
            width: 300px;
            height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div>
    <img data-src="./images/cherry.jpg" alt="">
    <img data-src="./images/circle_copy.svg" alt="">
    <img data-src="./images/person.png" alt="">
    <img data-src="./images/circle.svg" alt="">
    <img data-src="./images/person_copy.png" alt="">
    <img data-src="./images/kiss.jpg" alt="">
    <img data-src="./images/star.png" alt="">
    <img data-src="./images/kiss_copy.jpg" alt="">
    <img data-src="./images/star_copy.png" alt="">
    <img data-src="./images/cherry_copy.jpg" alt="">
</div>
</body>
<script>
  var imgs = document.querySelectorAll('img');
  //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
  function offsetH(e) {
    var height = e.offsetTop;
    while(e = e.offsetParent) {
      height += e.offsetTop;
    }
    return height;
  }

  function lazyLoad(imgs) {
    function getViewport() {  // 兼容性检查得出可视区高度
        let height;
        if(window.innerHeight){ // IE9以上
            height = window.innerHeight;
        }else if(document.compatMode === "BackCompat"){ // 混杂模式
            height = document.body.clientHeight;
        }else{  // IE9以下标准模式
            height = document.documentElement.clientHeight;
        }
        return height;
    }
    var viewportH =getViewport();
    var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
    for (var i = 0; i < imgs.length; i++) {
      if (viewportH + scrollH > offsetH(imgs[i])) {
        imgs[i].src = imgs[i].getAttribute('data-src');
      }
    }
  }
   // 滚动条滚动时懒加载 
  window.onload = window.onscroll = function () { 
    lazyLoad(imgs);
  }
</script>
</html>

H_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现图片懒加载

计算图片是否进入可视区实现<!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">
复制链接

扫一扫

专栏目录