原生实现图片懒加载

最新推荐文章于 2024-03-12 10:08:52 发布
最新推荐文章于 2024-03-12 10:08:52 发布
阅读量233 收藏 1
点赞数
分类专栏： 前端性能优化 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39816673/article/details/107317275
版权

什么是懒加载，大白话就是只加载用户所看到区域的资源，那么懒加载怎么实现呢？
实现原理就是监听滚动轮，判断当前图片是否在可视区内（包括滚动高度），如果不在就则进行加载
那么就存在一个问题就是，频繁操作DOM，对性能极其不友好，所以我们需要进行节流控制~具体代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>图片lazyload</title>
        <style>
            img {
                display: block;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://img.alicdn.com/tps/i4/TB1Njg2bjuhSKJjSspmSuwQDpXa.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i2/2958596375/TB10kTSRVXXXXajXFXXXXXXXXXX_!!0-item_pic.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i1/TB11mpAJVXXXXbtXVXXXXXXXXXX_!!0-item_pic.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i4/TB11DvzQXXXXXbQaFXXXXXXXXXX_!!0-item_pic.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i3/2807304908/TB1n.VeXm7PL1JjSZFHXXcciXXa_!!0-item_pic.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i2/TB1EGMPPFXXXXc2XXXXXXXXXXXX_!!0-item_pic.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i3/3310597052/TB1o4hQSpXXXXbraXXXXXXXXXXX_!!0-item_pic.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i4/1891815962/TB1zo5hfeEJL1JjSZFGXXa6OXXa_!!2-item_pic.png">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i1/TB1sdj1RFXXXXXEXVXXXXXXXXXX_!!0-item_pic.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i2/TB1uLbcPFXXXXchXFXXXXXXXXXX_!!0-item_pic.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i3/3055781561/TB1fqL6b8RRMKJjSZPhXXcZoVXa_!!0-item_pic.jpg">
        <img src="https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif" data-src="https://gw.alicdn.com/bao/uploaded/i2/1113314630/TB1QLExhfNNTKJjSspcXXb4KVXa_!!0-item_pic.jpg">
        <script>
            function thorttle(fn,delay,altime) {
                let startTime = new Date()
                let timer = null
                return function(){
                    let endTime = new Date()
                    timer && clearTimeout(timer)
                    if(endTime - startTime >= altime) {
                        fn()
                        startTime = endTime
                    } else {
                        timer = setTimeout(fn,delay)
                    }
                }
            }
            const src = 'https://8.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/loading.gif'
            function loadImgs() {
                let img = document.getElementsByTagName("img")
                let len = img.length
                let n = 0
                return function() {
                    let clientHeight = document.documentElement.clientHeight
                    let srcollTop = document.documentElement.scrollTop || document.body.scrollTop
                    for(let i = n;i < len; i++){
                        if(img[i].offsetTop < clientHeight + srcollTop){
                            console.log(img[i].offsetTop)
                            if(img[i].src === src){
                                img[i].src = img[i].dataset.src
                            }
                            n = n + 1
                        }
                    }
                }
            }
            var load = loadImgs()
            window.onload = function () {
                load()
                document.addEventListener("scroll",thorttle(load,500,1000))
            }
        </script>
    </body>
</html>
『业精于勤』
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS案例】——原生JS实现图片懒加载
m0_50785976的博客
09-18 347
原生JS实现图片懒加载
图片懒加载的原理
Sunny ic
06-24 2492
每天一个前端面试题之 图片懒加载的原理 图片懒加载是指当图片进入可视区后再加载。对于包含很多图片的网站，图片懒加载可以减轻服务器的压力，提高用户体验 一、图片懒加载的原理 在HTML中，图片是由 <img> 标签引入的，是由其中的src属性去请求的。所以实现懒加载的关键就是，在图片没有进入可视区的时候，不给src属性赋值，等图片进入到了可视区，再给src属性赋值，去请求图片。 二、图片懒加载的实现思路 首先看一张图，帮助我们判断图片什么时候进入了可视区。 图中，scrollTop 表示元素
原生js实现图片懒加载
weixin_43435271的博客
01-04 479
实现图片懒加载
图片懒加载（原生）
weixin_54498425的博客
06-25 129
2）、然后，当js监听到某张图片进入可视窗口时（说明你想看了），再将实际地址赋给src属性。如果图片没有进入可视区域，就不会加载图片（说明你还没想看呢），这样就大大的提高了效率。1）、先将img标签的src链接设为同一张图片(默认图片：可以是loading)，把图片的实际地址赋给一个自定义属性。这时候所有的图片只发送一次请求。通俗的说：你不看的图片我先不加载，也许你不看呢（哈哈），我何苦要做无效的事情呢 你想看时，我再加载（哈哈）一个网页如果包含了很多的图片，那么，服务器压力就会很大。
网络图片的加载
weixin_30340745的博客
03-20 323
1、网络图片加载：A-把URL放到DATA里；B-把data加载到uiimage中；C-把image加载到uiimageview上D-把uiimageview加到view上显示；E：释放image 请求网络图片主要有两种方式，第一种是使用NSData的静态方法dataWithContentsOfURL或者对象的初始化方法initWithContentsOfURL来实现。其实现代码如下： -(v...
图片懒加载的实现方法
最新发布
triggerV的博客
03-12 663
图片懒加载的常见实现方法
原生JS实现图片懒加载之页面性能优化
10-17
本文将深入探讨如何使用原生JavaScript实现图片懒加载，以及这种方式如何帮助优化页面性能。 一、图片懒加载原理 1. 数据存储：首先，我们需要为图片`<img>`标签添加一个自定义属性，如`data-src`，用来存储实际的...
原生JS实现图片懒加载(lazyload)实例
12-09
图片懒加载也是比较常见的一种性能优化的方法，最近在用vue做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。 实现原理 加载页面的时候，图片一直都是流量大头，针对图片的性能方法也挺多的...
ionic+requirejs实现图片懒加载
05-16
标题 "ionic+requirejs实现图片懒加载" 描述了一个使用Ionic框架和RequireJS库来创建一个具有图片懒加载功能的移动应用项目。这个项目旨在优化用户体验，特别是在移动设备上，通过延迟加载非可视区域的图片，减少...
简易版-图片懒加载-原生js
Xue_BT的博客
02-20 413
原理：将需要懒加载的图片src设置为loading图片，然后将data-src设置为图片原路径。待页面滚动到合适距离之后，就加载相应的图片。
IOS从网络上加载一系列的图片并显示在tableview上的例子
06-18
很完整的一个tableview延迟加载图片例子，从网络上加载json数据并解析，而且tableview在滑动过程中不会去向服务器做图片的请求
原生javascript页面图片懒加载代码
03-21
原生javascript页面图片懒加载效果
Vue 图片懒加载 之 Vue-Lazyload、js原生实现原理
muzidigbig的博客
04-01 9287
通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。那什么叫做需要用到的时候 比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了 懒加载的优点 可以减少首页首次加载的数量，减少服务器的压力 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。 为什么使用懒加载 getBoundingClientRect()位置 IntersectionObserver
详解前端性能优化之原生JS实现图片懒加载效果(通过IntersectionObserver内置构造函数实现)
izl040905的博客
11-17 1158
相信你作为一名用户，使用一款app，在首次打开页面时卡顿超过3秒时就会有退出的想法。所以我们在日常开发中，通常需要使用一些手段实现对性能的优化，来使得页面加载更快，用户体验更好。这其中有许多方式，其中最常用的无非是按需加载了，今天就带大家重点且详细的讲一下原生JS实现的图片懒加载。
进行浏览器原生的图片懒加载的几种方式和原理
无
03-07 1494
前言   对于图片较多的网站，倘若一次性加载所有图片，一方面由于同时加载的图片较多，页面的DOM元素将非常多，会造成页面卡顿性能严重下降，另外服务器的压力也会很大。另一方面若加载了很多图片，而用户浏览的图片仅有几张，将会耗费大量流量，造成浪费。   而懒加载就是针对此情况做的优化，同时会极大地提升用户体验。一句话总结就是，懒加载即延时加载，当图片要用到的时候再去加载。 offsetTop   懒加载的图片一般是固定宽高的，为避免图片较大时拉伸，可运用object-fit: cover来裁剪。 <st.
原生JS实现最简单的图片懒加载
weixin_33725239的博客
08-19 679
原文地址：原生JS实现最简单的图片懒加载 欢迎star。 如果有错误的地方欢迎指正。 Demo地址：http://axuebin.com/lazyload 照片都是自己拍的哦~ 懒加载 什么是懒加载 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时...
JavaScript：原生JS实现图片懒加载
热门推荐
郭宇的博客
06-12 1万+
懒加载 用户体验 优化
原生JS实现图片懒加载
qq_31965515的博客
10-26 2012
懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。倘若一次ajax请求过来10张图片的地址，我想如果你一次性把10张图片都加载出来，肯定是不合理的。 第一：会显示的很慢，多加载1秒都会引起用户的流失，这对靠流量的网站来说绝对是噩梦。  第二：用户如果只是随便看看，没想全部看，这无疑是浪费了用...
原生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、付费专栏及课程。

余额充值