js实现图片懒加载【附代码】

最新推荐文章于 2022-10-26 11:23:48 发布
最新推荐文章于 2022-10-26 11:23:48 发布
阅读量192 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a18792627168/article/details/106804704
版权

图片懒加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
	        ul{overflow:hidden;}
	        li{
	        	list-style:none;
	        	width:10rem;height:12rem;
	        	border:1px solid #ccc;
	        	box-sizing:border-box;
	        	-webkit-box-sizing:border-box;
	        	float:left;
	        	overflow:hidden;
	        	position:relative;
	        }
	        li i{
	        	width:20px;height:20px;
	        	border-radius:20px;
	        	position:absolute;
	        	border:2px solid #6feb95;
	        	z-index:0;left:50%;top:50%;
	        	margin-top:-11px;
	        	margin-left:-11px;
	        	animation:move 1s infinite;
	        	-webkit-animation:move 1s infinite;
	        }
	        li i:before{
	        	position:absolute;width:5px;height:5px;border-radius:4px;content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#fff;border:1px solid #fff;top:-3px;left:50%;margin-left:-3px;}
	        img{vertical-align:middle;border-width:0;width:100%;position:relative;z-index:1;}
	        @keyframes move{
	            0%{
	                transform:rotateZ(0);
	            }
	            100%{
	                transform:rotateZ(360deg);
	            }
	        }
	        @-webkit-keyframes move{
	            0%{
	                -webkit-transform:rotateZ(0);
	            }
	            100%{
	                -webkit-transform:rotateZ(360deg);
	            }
	        }
			
			
			
		</style>
	</head>
	<body>
			<ul>
		        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
		        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
		        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
		        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
		        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li> 
		        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
		        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
		        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
		        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
		        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
		        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
		        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
		        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
		        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
		        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
		        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
		        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
		        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
		        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
		        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
		        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
		        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
		        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
		        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
		        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
		        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
		        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
		        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
		        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
		        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
		        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
		        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
		        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
		        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
		        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
		        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
		   </ul>
		   
		   <script>
		   	/* 获取节点 */    
			var oUl = document.getElementsByTagName('ul')[0];
			var aLi = oUl.getElementsByTagName('li');
			
			/* 创建img标签函数 */    
			function createImg(obj){
			    var src = '';
			    if(obj.dataset.src){
			        src = obj.dataset.src;
			    }else{
			        src = obj.getAttribute('data-src');
			    }
			    if(obj.children.length <= 1){
			        var img = document.createElement('img');
			        img.src = src;
			        obj.appendChild(img);
			    }
			}
			
			/* 计算节点到文档顶部的距离 */    
			function getTop(obj){
			    var h = 0;
			    while(obj){
			        h += obj.offsetTop;
			        obj = obj.offsetParent;
			    }
			    return h;
			}
			    
			/* 滚动实时计算所到区域并进行相关计算 */
			window.onscroll = function(){
			    var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);
			    for(var i=0;i<aLi.length;i++){
			        if(getTop(aLi[i]) < t){  
			            setTimeout('createImg(aLi['+i+'])',500)
			        }
			    } 
			}
			
			/* 页面加载完便执行一次滚动函数 */
			window.onload = function(){
			    window.onscroll();
			}
		   </script>
	</body>
</html>

 

DOM曼珠沙华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浪漫页面表白（附代码）
05-21
例如，压缩CSS和JavaScript文件，减少HTTP请求，优化图片大小，以及使用懒加载技术来延迟非关键资源的加载。 6. **个性化定制**：这个表白网页款式三源码应该提供了一些预设的样式和内容，用户可以根据需要修改HTML...
8屏附缩略图焦点图广告代码
10-20
4. 图片懒加载：为了提高页面加载速度，可能会使用懒加载技术，只在用户滚动到对应位置时加载图片。 5. 响应式设计：考虑到不同设备的屏幕尺寸，代码可能包含媒体查询来确保在手机、平板和桌面等不同设备上都能正常...
关于用js如何实现图片懒加载的问题
huataibie的博客
09-19 185
最近项目中由于页面图片太多，导致网页打开的速度非常慢，这时需要应用到图片懒加载的功能。 先说一下实现原理： 先将img标签的src链接设为同一张正在加载中的gif格式图片，然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。 这样做能防止页面一次性向服...
js防抖和限流
a_passing_traveller的博客
04-08 3316
防抖 function debounce(callback,delay=300){ var t = null return function(){ clearTimeout(t) t = setTimeout(callback,delay) } } window.onscroll = debounce(function(){ cons...
【前端用法】JavaScript图片懒加载原理及实现（JavaScript实现图片懒加载的方法分析）
No8g攻城狮的博客
05-19 1148
本文目录 一、懒加载原理 1.1 原理 1.2 目的 二、代码实现 2.1 实现步骤 2.2 JS代码 一、懒加载原理 1.1 原理 先将img标签的src链接设为同一张图片，然后给img标签设置自定义属性（比如 data-original），然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中，达到懒加载的效果。 1.2 目的 这样做能够避免页面一次性向服务器发送大量请求，导致服务器响应变慢，最终导致页面卡顿、崩溃
原生JS实现最简单的图片懒加载
weixin_33725239的博客
08-19 679
原文地址：原生JS实现最简单的图片懒加载 欢迎star。 如果有错误的地方欢迎指正。 Demo地址：http://axuebin.com/lazyload 照片都是自己拍的哦~ 懒加载 什么是懒加载 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时...
浅谈js实现图片懒加载
小白的博客
06-28 275
有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。 为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。 vue项目中的打包，是把html、css、js进行打包，还有图片压缩。但是打包时把css和js都分成了几部分，
【uniapp 组件篇】实现图片懒加载附源代码
热门推荐
业余丰富各种技术栈
09-05 3万+
uniapp实现图片懒加载,使用 intersectionObserver API 监听节点的相交情况实现懒加载
【uniapp 图片懒加载】附源代码
业余丰富各种技术栈
10-26 1037
【uniapp 图片懒加载】附源代码
提示“数据正在加载中，请稍后“
02-04
对于前端，可以考虑采用懒加载、代码分割等策略，只加载当前视图所需的数据和资源，减少初始加载时间。 总的来说，“数据正在加载中，请稍后”这一提示是用户体验设计中的重要环节。通过合理的加载动画和有效的代码...
顶部附广告的大按钮焦点图.rar
07-05
6. **性能优化**：考虑到加载速度和用户体验，开发者需要注意图片的压缩、代码的精简，以及可能的懒加载策略，以减少页面的加载时间。 7. **兼容性测试**：最后，开发者需要在不同的浏览器和操作系统上进行测试，...
B站首页界面设计：附详细教程
02-16
- 通过合理的图片压缩、代码压缩和懒加载技术，减少首页的加载时间和数据消耗，提升用户体验。 以上就是设计B站首页界面的关键知识点，结合提供的图片资源（1.png、2.png）和源码（weapp-jief-bilibili-master），...
JS深拷贝与浅拷贝的区别及实现
DOM曼珠沙华的博客
06-13 2959
区分 浅拷贝：拷贝后，修改拷贝后的对象，会影响拷贝前的对象 深拷贝：拷贝后，修改拷贝后的对象，不影响之前的对象 浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来； 基本数据类型，名字和值都会储存在栈内存中。 引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值 当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受.
JS的hasOwnPrototype()方法和 in 操作符
DOM曼珠沙华的博客
06-13 2794
使用hasOwnPrototype()方法可以检测一个属性是否存在于实例中，还是存在于原型中。这个方法（不要忘了它是从Object继承来的）只在给定属性存在于对象实例中时，才返回true。 看例子： function Person(){} Person.prototype.name = "Tom"; Person.prototype.age = 23; Person.prototype.job = 'Software Engineer'; Person.prototype.sayName = func
一次完整的HTTP请求过程 简述
DOM曼珠沙华的博客
06-02 2229
在我们在搜索输入框输入www.baidu.com，然后回车，就开始了HTTP请求的过程 。 过程预览 1.对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址 　　2.根据这个IP，找到对应的服务器，发起TCP的三次握手 　　3.建立TCP连接后发起HTTP请求 　　4.服务器响应HTTP请求，浏览器得到html代码 　　5.浏览器解析html代码，并请求html代码中的资源（如js、css图片等）（先得到html代码，才能去找这些资源） 　　6.浏览器对页面...
JS对象详解（对象创建及属性类型）
DOM曼珠沙华的博客
05-26 2110
对象 ESMAScript把对象定义为：无序属性的集合，其属性可以包含基本值，对象或者函数。简单来说，是一组名值对，其中值可以是数据或函数。 每个对象都是基于引用类型创建的。 创建对象 1.创建自定义对象的最简单的方式是创建Object的实例，然后再为它们添加属性和方法： var person = new Object(); person.name = "Nicholas"; person.age = 10; person.job = "Software Engineer"; person.s
try-catch语句的简单用法
DOM曼珠沙华的博客
02-23 1563
ECMA引入try catch语句，作为Js中处理异常的一种标准方式。与java内的try-catch语句完全相同。 try{ // 可能会导致错误的代码 }catch(error){ // 在错误发生时怎么处理 } finally{ // 可选 ，但是如果添加了，就一定会执行 // 内部的内容会被执行，即使上面有return也会执行 } 如果try块内的任何代码发生了错误，就会立即退出代码执行过程，然后立即执行catch块。此时，catch块会接收到
JS运算符 （...）了解及使用
DOM曼珠沙华的博客
07-23 1471
这个运算符（...）一般用于数组数据获取数据解构合并等这个一般用于数组，对对象直接使用的话会报错。
js 怎么实现图片懒加载
最新发布
11-08
图片懒加载可以通过原生JS...以上代码中，首先获取所有需要懒加载的图片，然后通过判断图片是否在可视区域内来决定是否加载图片。当图片进入可视区域内时，将图片的data-src属性赋值给src属性，从而实现图片的懒加载。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值