原生javascript实现图片懒加载

最新推荐文章于 2024-03-12 10:08:52 发布
最新推荐文章于 2024-03-12 10:08:52 发布
阅读量250 收藏
点赞数
分类专栏： Javascript 文章标签： 原生js图片懒加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012780176/article/details/79938501
版权 
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Document</title>  
<style>
div{
width: 300px;
height: 300px;
margin-bottom: 20px;
}
</style>  
</head>  
<body>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan6.jpg">
</div>
<div>
<img src="http://www.zj1024.com/images/loading.gif" data-src="http://www.zj1024.com/item/works/shuyuan/images/shuyuan1.jpg">
</div>
</body>
  
<script>
;(function(window,document){
	var num = document.getElementsByTagName('img').length;  
	var img = document.getElementsByTagName('img');
	var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
	lazyload(); //页面载入完毕加载可是区域内的图片
	function lazyload() { //监听页面滚动事件
	    var seeHeight = document.documentElement.clientHeight; //可见区域高度  
	    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度  
	    for (var i = n; i < num; i++) {  
	        if (img[i].offsetTop < seeHeight + scrollTop) {  
	            if (img[i].getAttribute("src") == "http://www.zj1024.com/images/loading.gif") {  
	                img[i].src = img[i].getAttribute("data-src");  
	            }  
	            n = i + 1;  
	        }  
	    }  
	}  
	// 简单的节流函数  
	//fun 要执行的函数  
	//delay 延迟  
	//time  在time时间内必须执行一次  
	function throttle(fun, delay, time) {  
	    var timeout,  
	        startTime = new Date();  
	    return function() {  
	        var context = this,  
	            args = arguments,  
	            curTime = new Date();  
	        clearTimeout(timeout);  
	        // 如果达到了规定的触发时间间隔，触发 handler  
	        if (curTime - startTime >= time) {
	            fun.apply(context, args);  
	            startTime = curTime;  
	            // 没达到触发间隔，重新设定定时器  
	        } else {
	            timeout = setTimeout(function(){
	                fun.apply(context, args);  
	            }, delay);
	        }  
	    };  
	};  
	// 实际想绑定在 scroll 事件上的 handler
	// 采用了节流函数
	window.addEventListener('scroll',throttle(lazyload,500,1000)); 
})(window,document);
</script>  
</html>

dawkdamwdkmadk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS案例】——原生JS实现图片懒加载
m0_50785976的博客
09-18 347
原生JS实现图片懒加载
原生图片懒加载
G_XUI的博客
09-08 126
学习目标： 掌握原生图片懒加载 学习内容： 1、 掌握原生图片懒加载 2、 分析js代码 3、 搜索熟悉陌生单词用法 4、 掌握懒加载 概念 什么是懒加载 懒加载顾名思义突出一个“懒”字，懒字就是拖延的意思，说白就是延迟加载。比如我们进入一个新的页面进行加载的时候，这个页面很长超过了屏幕可视区域的时候，那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。 为什么要懒加载？ 懒加载是一种优化网页性能的一种方式，它极大的提高了用户的体验。举
图片懒加载（原生）
jiang7701037的博客
12-29 1519
1、场景： 一个网页如果包含了很多的图片，那么，服务器压力就会很大。不仅影响渲染速度还会浪费带宽。 通俗的说：你不看的图片我先不加载，也许你不看呢（哈哈），我何苦要做无效的事情呢 你想看时，我再加载（哈哈） 2、原理： 　 1）、先将img标签的src链接设为同一张图片(默认图片：可以是loading)，把图片的实际地址赋给一个自定义属性。这时候所有的图片只发送一次请求。 　 2）、然后，当js监听到某张图片进入可视窗口时（说明你想看了），再将实际地址赋给src属性。src属性的值发生变化时，浏览
JS 原生图片懒加载
梅西上身的博客
05-28 614
JavaScript 原生图片懒加载
原生JS实现图片懒加载之页面性能优化
10-17
本文将深入探讨如何使用原生JavaScript实现图片懒加载，以及这种方式如何帮助优化页面性能。 一、图片懒加载原理 1. 数据存储：首先，我们需要为图片`<img>`标签添加一个自定义属性，如`data-src`，用来存储实际的...
原生javaScript实现图片延时加载的方法
10-25
主要介绍了原生javaScript实现图片延时加载的方法,无需通过载入jQuery脚本即可实现图片的延时加载效果,是非常实用的技巧,需要的朋友可以参考下
原生JS实现图片懒加载(lazyload)实例
10-19
图片懒加载是一种优化网页...3. 在滚动事件处理函数中，判断图片是否进入可视区域，如果是，则加载图片。 这个过程能够有效地提高网页的加载速度，提升用户体验。在实际项目中，你可以根据需求进一步优化和调整代码。
原生javascript页面图片懒加载代码
03-21
原生javascript页面图片懒加载效果
原生实现图片懒加载
麻瓜哇哇哇的博客
07-13 233
什么是懒加载，大白话就是只加载用户所看到区域的资源，那么懒加载怎么实现呢？ 实现原理就是监听滚动轮，判断当前图片是否在可视区内（包括滚动高度），如果不在就则进行加载 那么就存在一个问题就是，频繁操作DOM，对性能极其不友好，所以我们需要进行节流控制~具体代码如下所示： <!DOCTYPE html> <html> <head> <title>图片lazyload</title> <style>
原生JS实现图片懒加载
欧阳的技术博客
12-27 9701
原理与概述 概述：如网页中需要加载N张图片，为了提升用户体验，减少用户的等待时间，兼顾加载性能。只加载当前视口的图片（也称作一屏），其余图片等用户向下滑动的时候再进行加载（滚动条向下滚动的时候）。 原理：获取用户设备当前高度，循环图片，获取其距离顶部的距离，处在第一屏的图片先加载，当滚动条发生滚动，继续加载。 html 实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt.
原生js实现图片懒加载（lazyLoad）
嘿嘿
05-16 688
一.什么是懒加载？ 懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。 二.为什么要懒加载？ 懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，
简易版-图片懒加载-原生js
Xue_BT的博客
02-20 413
原理：将需要懒加载的图片src设置为loading图片，然后将data-src设置为图片原路径。待页面滚动到合适距离之后，就加载相应的图片。
图片懒加载的实现方法
最新发布
triggerV的博客
03-12 663
图片懒加载的常见实现方法
图片懒加载原理（面试）
qq_45596827的博客
11-22 339
默认给当前页面所有的img标签的src属性赋值成同一个小图，当做所有图片的默认图片，然后再添加一个自定义属性，比如data-src,里面写上当前标签真正的图片地址，在滚动页面滚动条的过程中，判断是否有图片进入可视区，进入可视区的图片需要把身上的src属性值替换成data-src属性值，这样就完成了懒加载。// 替换图片原始地址。
web前端面试题附答案014-图片懒加载有什么缺点吗？
xingyu_qie的专栏
10-04 438
很明显啊，问图片懒加载的缺点，面试官最省心，面试者最讨厌的问题就是xxx的缺点说一下，问了你半天问题，你以为答得差不多了，面试官来一句那么xxx的缺点是什么，经常弄得你不要不要的。
原生js实现图片懒加载的源码
03-29
以下是原生js实现图片懒加载的源码： ```javascript // 获取所有需要懒加载的图片元素 const lazyImages = document.querySelectorAll("img.lazy"); // 判断图片是否在可视区域内 function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // 加载图片 function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } // 监听window的滚动事件 window.addEventListener("scroll", function () { // 遍历需要懒加载的图片元素 for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ``` 首先，我们获取所有需要懒加载的图片元素： ```javascript const lazyImages = document.querySelectorAll("img.lazy"); ``` 接着，我们定义一个函数`isInViewport`用于判断图片是否在可视区域内。该函数会返回一个布尔值，表示图片是否在可视区域内： ```javascript function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } ``` 然后，我们定义一个函数`loadImage`用于加载图片。该函数会将图片的`src`属性设置为`data-src`属性的值，并移除`lazy`类： ```javascript function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } ``` 最后，我们监听`window`的滚动事件，遍历所有需要懒加载的图片元素，如果图片在可视区域内，则调用`loadImage`函数加载图片： ```javascript window.addEventListener("scroll", function () { for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值