原生js-图片懒加载

最新推荐文章于 2023-01-04 14:46:25 发布
最新推荐文章于 2023-01-04 14:46:25 发布
阅读量108 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WiseGirls/article/details/118195644
版权

图片懒加载

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <div>
      <h1>哈哈哈哈哈</h1>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈韩国哈哈哈</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.rhEgA91PdLe0WmQ9HyGB6AHaE6?w=301&h=199&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>嘿嘿嘿嘿嘿</h1>
      <p>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.MPabZydnCMpMAurLOYYQTQAAAA?w=116&h=185&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>呵呵呵呵呵</h1>
      <p>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.0UEwUK9S21cKs57nW817dAAAAA?w=162&h=183&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>哦哦哦哦哦</h1>
      <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse3-mm.cn.bing.net/th/id/OIP-C.qgciVXWXEmDdtD-6arlGrwHaFj?w=218&h=183&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>乐乐Elle了</h1>
      <p>乐乐Elle了乐乐Elle了乐乐Elle了乐乐Elle了乐乐Elle了</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse1-mm.cn.bing.net/th/id/OIP-C.vEKHyINNjqDMUiGPG2hZqQHaE8?w=246&h=180&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
  </div>
</body>
<script>
  var image = document.querySelectorAll('#imgsrc')
  function imglazy(image, distance) {
    image.forEach(item => {
      if (item.offsetTop < window.innerHeight + window.pageYOffset + distance) {
        item.src = item.dataset.url;
      }
    })
  }
  imglazy(image, 150)

  window.onscroll = throttle(imglazy, 1000)

  function throttle(imglazy, time) {
    let timer = null
    return function () {
      if (timer) { return }
      timer = setTimeout(() => {
        imglazy(image, 150)
        timer = null
      }, time)
    }
  }
</script>

</html>
如果出现图片一直重复加载的情况和懒加载失败，图片一次性加载出来的情况，可以尝试下面的方式
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  	// 因为offsetTop是以它最近的带定位的的父元素为参照点，所以当没有带有定位的父元素时，会一直往上找，
  	// 直到找到body，有时会出现因为body没设置宽高，所以offsetTop的值有问题的情况，导致效果不对
    body {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div>
    <div>
      <h1>哈哈哈哈哈</h1>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈韩国哈哈哈</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.rhEgA91PdLe0WmQ9HyGB6AHaE6?w=301&h=199&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>嘿嘿嘿嘿嘿</h1>
      <p>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.MPabZydnCMpMAurLOYYQTQAAAA?w=116&h=185&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>呵呵呵呵呵</h1>
      <p>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.0UEwUK9S21cKs57nW817dAAAAA?w=162&h=183&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>哦哦哦哦哦</h1>
      <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse3-mm.cn.bing.net/th/id/OIP-C.qgciVXWXEmDdtD-6arlGrwHaFj?w=218&h=183&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>乐乐Elle了</h1>
      <p>乐乐Elle了乐乐Elle了乐乐Elle了乐乐Elle了乐乐Elle了</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse1-mm.cn.bing.net/th/id/OIP-C.vEKHyINNjqDMUiGPG2hZqQHaE8?w=246&h=180&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
  </div>
</body>
<script>
  var image = document.querySelectorAll('#imgsrc')
  var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
  function imglazy(image, distance) {
    for (var i = n; i < imgArr.length; i++) {
      if (item.offsetTop < window.innerHeight + window.pageYOffset + distance) {
        if (imgArr[i].getAttribute('src') == '') {
          imgArr[i].src = imgArr[i].getAttribute('data-src')
        }
        n = i + 1
      }
    }
  imglazy(image, 150)

  window.onscroll = throttle(imglazy, 1000)

  function throttle(imglazy, time) {
    let timer = null
    return function () {
      if (timer) { return }
      timer = setTimeout(() => {
        imglazy(image, 150)
        timer = null
      }, time)
    }
  }
</script>

</html>
小小白号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS案例】——原生JS实现图片懒加载
m0_50785976的博客
09-18 347
原生JS实现图片懒加载
原生JS实现图片懒加载
qq_23870025的博客
05-20 464
最近接的项目终于接近尾声，这段时间一直没有造轮子，在实现设计图还原的途中，发现还是有一些技术需要掌握，难者不会，会者不难，没有实际操作过的东西在项目中毫无头绪，而懒加载在实际开发中是一个很有效的东西，在页面中我们往往需要放上很多张图，性能是个大问题，一次性加载所有图片一般都会卡很久，因此，在需要预览的时候再加载，是一个很好的解决方案。 参考了https://www.denpe.com/javasc
原生js实现图片懒加载
weixin_43435271的博客
01-04 477
实现图片懒加载
详解前端性能优化之原生JS实现图片懒加载效果(通过IntersectionObserver内置构造函数实现)
izl040905的博客
11-17 1157
相信你作为一名用户，使用一款app，在首次打开页面时卡顿超过3秒时就会有退出的想法。所以我们在日常开发中，通常需要使用一些手段实现对性能的优化，来使得页面加载更快，用户体验更好。这其中有许多方式，其中最常用的无非是按需加载了，今天就带大家重点且详细的讲一下原生JS实现的图片懒加载。
原生JS实现图片懒加载之页面性能优化
10-17
原生js实现图片懒加载 *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ overflow: hidden; list-style: none; } li{ float: left; width: 50%; height: 200px; padding: 10px; } li img{ display: ...
原生JS实现图片懒加载(lazyload)实例
10-19
原生JavaScript实现的图片懒加载方案并不复杂，但需要理解其核心原理和关键代码。 首先，实现懒加载的基本思路是：在页面初始化时，非首屏的图片的`src`属性设置为一个默认的占位符，如加载中的图片或者一张小尺寸...
原生javascript页面图片懒加载代码
03-21
原生javascript页面图片懒加载效果
JavaScript：原生JS实现图片懒加载
热门推荐
郭宇的博客
06-12 1万+
懒加载 用户体验 优化
原生 JS 懒加载简单实现
kayron的博客
11-27 2750
懒加载优势: (1) 节省网络资源 – 一次性加载所有资源很慢 (2) 对用户体验 – 节省流量, 使用友好 (3) 对服务器而言 – 减轻负载压力 懒加载原理: 只显示可视区域的图片给用户 功能实现 (1) 图片标签默认是占位图, 图片真正的地址在自定义属性里 (2) 滚动时把可是区域的占位图替换成自定义属性里的图片路径 需要用到知识点: (1) 图片距离顶部的
原生js图片懒加载代码实现 @zj-zhangjie
weixin_45616142的博客
09-08 215
原生js图片懒加载是真对项目页面图片过多，加载慢，增强用户体验感的最佳解决方案 什么是懒加载？ 懒加载顾名思义突出一个“懒”字，懒字就是拖延的意思，说白就是延迟加载。比如我们进入一个新的页面进行加载的时候，这个页面很长超过了屏幕可视区域的时候，那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。 为什么要用懒加载？ 懒加载是一种优化网页性能的一种方式，它极大的提高了用户的体验。举个栗子：就拿图片来说，一个网站，单个网页的页面上“图片”是构成页面主体的一个极大部分，但是在现
JS 原生图片懒加载
梅西上身的博客
05-28 613
JavaScript 原生图片懒加载
原生js实现图片懒加载（lazyLoad）
包磊磊的博客
05-14 551
关注公众平台:【资料分享大师】免费领取更多资料。 效果： 懒加载效果 从上面的视频我们可以看到，当我们向下滚动的时候图片资源才被请求到，这也就是我们本次要实现的效果，这也就是懒加载。 欢迎关注微信公众号：资料分享大师 其它参考文章： 天之蓝源：三分钟在GitHub上搭建个人博客​zhuanlan.zhihu.com天之蓝源：零基础Hexo+Github搭建静态个人博客​zhuanlan.zhihu.com天之蓝源：原生js实现点击按钮复制文本内容​zhuanlan.zhihu.com天之蓝.
原生javascript图片懒加载效果代码。
CodingNoob
03-21 1484
原理是先获取页面所需懒加载的所有图片对象，然后分别计算图片距离顶部的距离是否小于屏幕可见高度+页面滚动高度，即元素是否从下滚动到眼球可见位置，如果小于，那么将自定义的data-src属性中的值（即图片的URL地址赋值给src属性，完成请求加载）。监听页面滚动事件即可！定义n 值存储起来可以更好的记录到滚动可见的图片，避免重复循环，提高性能。
原生js实现图片懒加载的源码
最新发布
03-29
以下是原生js实现图片懒加载的源码： ```javascript // 获取所有需要懒加载的图片元素 const lazyImages = document.querySelectorAll("img.lazy"); // 判断图片是否在可视区域内 function isInViewport(image) { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值