5分钟撸一个js图片懒加载【图片可视区域加载】+函数节流版

最新推荐文章于 2024-05-28 17:25:10 发布
最新推荐文章于 2024-05-28 17:25:10 发布
阅读量582 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/59eafd755188250989513a0c
版权

http://hjingren.cn/2017/06/09/js%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/

原生JS实现最简单的图片懒加载

函数节流版：

 imgLazyLoad () {
    // 保存定时器的返回值
    var timeScroll = null
    // 把懒加载需要的东西封装在命名空间里
    var image = {
      length: document.images.length,  // 图片的长度
      linkAll: document.images,  // 所有图片的链接
      linkIdCurrent: 0  // 保存下一次准备加载的图片节点ID
    }
    // 滚动事件
    document.onscroll = function () {
      // 此处使用节流函数来避免多次执行
      clearTimeout(timeScroll)  // 触发滚动事件时，清除之前的定时器
      // 然后重新计算定时器，避免多次执行
      timeScroll = setTimeout(function () {
        lazyLoad()  // 满足条件则执行懒加载
      }, 100)
    }
    // 懒加载函数
    function lazyLoad () {
      if (image.linkIdCurrent >= document.images.length) {
        return null
      } else if (image.linkAll[image.linkIdCurrent].className === undefined) {
        image.linkIdCurrent++
        return null
      } else if (image.linkAll[image.linkIdCurrent].className !== 'info-img') {
        image.linkIdCurrent++
        return null
      }
      // 顶部距离
      var bodyScrollTop = document.body.scrollTop || document.documentElement.scrollTop
      // 窗口高度
      var clientHeight = document.documentElement.clientHeight
      if (image.linkIdCurrent < document.images.length) {
        // 如果图片已加载，则处理下一张图片
        if (image.linkAll[image.linkIdCurrent].src !== '') {
          image.linkIdCurrent++
          return lazyLoad()
        }
        // 当前图片距顶部的距离
        var currentScrollTop = image.linkAll[image.linkIdCurrent].offsetTop
        // 当图片距顶部距离小于等于顶部距离加上窗口高度时执行
        if (currentScrollTop <= bodyScrollTop + clientHeight) {
          // 获取data-src的值，并保存在变量里
          var imgSrc = image.linkAll[image.linkIdCurrent].getAttribute('data-src')
          // 把data-src里的值赋给src，促发GET请求，加载图片
          image.linkAll[image.linkIdCurrent].src = imgSrc
          // 移除data-src属性
          image.linkAll[image.linkIdCurrent].removeAttribute('data-src')
          image.linkIdCurrent++  // 更改成下一次准备加载的图片ID
          lazyLoad()  // 如果当前满足条件则尝试再次进行懒加载
        }
      }
    }
    // 执行懒加载函数，下载首屏图片
    lazyLoad()
  }复制代码




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

	<head>
		<meta charset="UTF-8">
		<title>图片懒加载(可视区域加载)</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}
			
			html,
			body {
				width: 100%;
				min-height: 100%;
			}
			
			#SB {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#SB .in {
				border: 1px solid red;
				margin: 10px;
				text-align: center;
				height: 400px;
				width: 400px;
				float: left;
			}
			
			.in img {
				border: none;
				vertical-align: middle;
				height: 400px;
				width: 400px;
			}
		</style>
	</head>

	<body>
		<ul id="SB">
			<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
		</ul>
		<script type="text/javascript">
			var aImages = document.getElementById("SB").getElementsByTagName('img'); //获取id为SB的文档内所有的图片
			loadImg(aImages);
			window.onscroll = function() {  //滚动条滚动触发
				loadImg(aImages);
			};
			//getBoundingClientRect  是图片懒加载的核心
			function loadImg(arr) {
				for(var i = 0, len = arr.length; i < len; i++) {
					if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
						arr[i].isLoad = true; //图片显示标志位
						//arr[i].style.cssText = "opacity: 0;";  
						(function(i) {
							setTimeout(function() {
								if(arr[i].dataset) { //兼容不支持data的浏览器
									aftLoadImg(arr[i], arr[i].dataset.imgurl);
								} else {
									aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));
								}
								arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein
							}, 500)
						})(i);
					}
				}
			}

			function aftLoadImg(obj, url) {
				var oImg = new Image();
				oImg.onload = function() {
					obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象
				}
				oImg.src = url; //oImg对象先下载该图像
			}
		</script>
	</body>

</html>
复制代码



给加上默认菊花图片：

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

	<head>
		<meta charset="UTF-8">
		<title>图片懒加载(可视区域加载)</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}
			
			html,
			body {
				width: 100%;
				min-height: 100%;
			}
			
			#SB {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#SB .in {
				border: 1px solid red;
				margin: 10px;
				text-align: center;
				height: 200px;
				width: 200px;
				float: left;
			}
			
			.in img {
				border: none;
				vertical-align: middle;
				height: 200px;
				width: 200px;
			}
		</style>
	</head>

	<body>
		<ul id="SB">
			<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
			<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
		</ul>
		<script type="text/javascript">
			var aImages = document.getElementById("SB").getElementsByTagName('img'); //获取id为SB的文档内所有的图片
			loadImg(aImages);
			window.onscroll = function() { //滚动条滚动触发
				loadImg(aImages);
			};
			//getBoundingClientRect  是图片懒加载的核心
			function loadImg(arr) {
				for(var i = 0, len = arr.length; i < len; i++) {
					if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
						arr[i].isLoad = true; //图片显示标志位
						//arr[i].style.cssText = "opacity: 0;";  
						(function(i) {
							setTimeout(function() {
								if(arr[i].dataset) { //兼容不支持data的浏览器
									aftLoadImg(arr[i], arr[i].dataset.imgurl);
								} else {
									aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));
								}
								arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein
							}, 500)
						})(i);
					}
				}
			}

			function aftLoadImg(obj, url) {
				var oImg = new Image();
				oImg.onload = function() {
					obj.src = oImg.src; //下载完成后将该图片赋给目标obj目标对象
				}
				oImg.src = url; //oImg对象先下载该图像
			}
		</script>
	</body>

</html>复制代码


weixin_34292924
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片懒加载
Choiceanxiety的博客
03-07 379
图片懒加载
vue java图片懒加载_「Vue」 手撸一个图片懒加载/预加载指令
weixin_31567239的博客
03-09 202
前言ES6 注意！！最近在优化个人博客前端，翻看到了自己图片懒加载/预加载的远古代码(通过watch监听实现的)，虽说实际效果勉强还行，但总觉得不够 “Vue”，功能上也有所不足。考虑到现有的 vue-lazyload 插件将懒加载指令化了，于是我想能不能自己也写一个。搜索一波后发现是可行的，并且还挺简单的，这篇文章给了我很多参考，在此之上我又优化并增添了额外功能，最后也不超一百行代码，奥利给，造...
一个接近完美的图片懒加载功能函数
u010117667的博客
08-26 195
图片懒加载 此功能函数特色： 由于图片懒加载需要监听滚动条事件，而滚动条事件触发非常频繁，因此函数内部做了众多优化； 无论滚动条是 html 的、 body 的，或者某个容器的，都能通过此函数实现懒加载功能； 使用简单：只需调用 $lazyloadFn(<传入滚动条元素节点>) 即可实现。 使用方法 在 index.html 的 script 标签中添加下面的代码，把 $laz...
使用节流函数实现图片懒加载
qq_43558459的博客
09-24 265
在开始之前，我们有必要知道什么是图片懒加载，什么又是节流函数？ 图片懒加载 当我们访问一个图片很多的页面的时候，如果一次性加载完所有的图片，那响应速度可想而知。用户体验非常不好。并且一次性向服务器发送大量请求，可能会导致页面卡顿崩溃等。所以我们需要“懒”一点。怎么懒呢？就是监听页面滚动事件，根据页面滚动，我们再加载图片。 主要思路如下： img标签的src属性指向一同一张小图片或者空白 设置一个新的属性new-src指向真正的图片路径 载入页面时将可视区的图片的src换成new-src 监听滚动事件 /
函数节流和图片懒加载
weixin_33949359的博客
09-25 105
导读 这篇文章中主要介绍一下函数节流，然后给了一个图片懒加载的例子，说图片懒加载的时候顺带提了下怎么使用JS获取页面的宽高，卷上去的长度等。参考来源主要是《JavaScript高级程序设计》。 函数节流 浏览器的DOM操作比起非DOM交互需要更多的内存和cpu时间，连续过多的DOM操作可能会导致浏览器挂起甚至崩溃。比如使用onresize...
快速实现JS图片懒加载(可视区域加载)示例代码
10-20
JavaScript 图片懒加载（也称为可视区域加载）是一种优化网页性能的技术，主要目的是提升网页加载速度，改善用户体验，减轻服务器压力，并对SEO产生积极影响。它通过只加载用户当前可视区域内的图片，而不是一次性...
原生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: ...
基于vue的懒加载插件实现图片或者其他资源进入可视区域后加载
08-12
本篇文章将详细探讨如何基于Vue.js实现一个懒加载插件，使得图片或其他资源仅在进入用户可视区域时才开始加载，从而减少页面初始化时的数据请求量，提升页面加载速度。 首先，我们要理解“懒加载”（Lazy Loading）...
“懒”的妙用——浅析图片懒加载技术
前端小贤
03-01 1004
1、定义图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称为“图片懒加载”。2、传统的解决方案我们先来探讨一下传统的图片懒加载技术是如何实现的。以京东sale活动页为例，...
在nginx上撸一个图片服务器
wulixiaoxiao1的博客
03-10 1329
图片服务器存在的需求是，根据手机屏幕尺寸以及dpi的不同，将一些尺寸较大的图片进行动态等比例缩放，最终达到不浪费屏幕像素、也不希望图片糊掉的目的。 nginx下需要用到的东西： http_image_filter模块；proxy_pass/proxy_store； 预期的使用方法如下： 在服务器/webroot/image_resize文件夹下，建立当前项目文件夹（下文以a
介绍图片懒加载的几种实现方法
最新发布
weixin_52648900的博客
05-28 1253
介绍图片懒加载的几种实现方法
js和jquery懒加载之可视区域加载
weixin_34101229的博客
09-13 131
2019独角兽企业重金招聘Python工程师标准>>> ...
实现图片懒加载
qq_43412333的博客
05-15 216
当一个页面同时加载几千张图片时，会对服务器造成跟大的压力，并且还会导致渲染速度的降低，为了解决这一问题，我们可以想办法让图片出现在我们的可视区域后再加载 懒加载原理： 图片是否渲染是根据<img>的src属性，所以在图片没有进入可视区域时，先不给src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。 懒加载思路： 1.加载loading图片 2.判断图片是否开始加载 3.隐形加载图片 4.替换真图片 效果图 判断图片是否加载的条件为（所以当图片的offse.
图片懒加载 及其反爬机制
weixin_33874713的博客
05-09 266
# 什么是图片懒加载? 图片懒加载概念： 图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称为“图片懒加载”。 网站一般如何实现图片...
一段很好使用并且容易 理解的 图片懒加载代码
weixin_42060658的博客
09-28 161
<!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-...
图片懒加载之可视区！
weixin_33871366的博客
06-09 55
懒加载的意义（为什么要使用懒加载） 对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。 所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的...
带加载进度的Web图片懒加载组件Lazyload
weixin_33804582的博客
04-24 149
在Web项目中，大量的图片应用会导致页面加载时间过长，浪费不必要的带宽成本，还会影响用户浏览体验。 Lazyload 是一个文件大小仅4kb的图片懒加载组件（不依赖其它第三方库），组件会根据用户当前浏览的区域去自动加载对应的图片（用户还没有浏览的区域图片则不会进行加载）。 Lazyload 允许图片加载之前，指定一张相对较小的封面图。组件...
手撸体会动态页面分析及代码
HPUZJH
12-27 9979
手撸动态网页图片爬取，还有一些问题不太理解。。。三页图片数量应该是90张啊。。。 import re import requests url = 'http://image.baidu.com/search/index' headers = { 'Accept':'text/plain, */*; q=0.01', 'Accept-Encoding':'gzip, defl...
嘿~全流程带你基于Pytorch手撸图片分类“框架“--HuClassify
`or 1 or 不正经の泡泡
04-14 4980
文章目录前言使用项目结构训练过程准备数据集与配置进入训练训练显示使用模型编码实现配置文件读取配置文件HU数据集解析器其他使用模型 LeNet训练实现 前言 鸽了两天，从星期二晚上就开始说要发布这篇文章，昨天还发布了一下关于这玩意的文章，今天早上果断删除，因为完整版来喽。好吧，其实看标题有点那啥了，其实我这次做的还是一个非常简单的小dome，一个非常小的分类dome，如果一定要说是框架的话，那么只能叫V0.1版本。使用的神经网络模型也算是非常简单的LeNet。 不过这个玩意我是仿造YoloV5的项目结构来写的
深度解析：网页图片懒加载的实现策略
其基本原理是延迟非可视区域图片的加载，只在用户滚动到图片所在位置时才开始加载，这样可以显著降低首屏加载时间，提升页面响应速度，同时节省用户的网络带宽。 1. **getBoundingClientRect API实现** 这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值