JavaScript懒加载详解

2024-08-02 19:35:43

懒加载

顾名思义比较懒，不想全部加载出来，当用户什么时候想看我在加载后面的东西

概括：懒加载其实就是延时加载，即当对象需要用到的时候再去加载。

实现原理：

首先你要有很多个第一张用来加载的图片，加载完毕之后显示后面所需的图片

步骤实现：

1.加载load图片
2.判断哪些图片要加载
3.隐形加载图片
4.替换真图片

CSS样式：

    <style>
        img {
            width: 400px;
            height: 300px;
            display: block;
        }
        .row{
            width: 300px;
            height: 400px;
        }
    </style>

HTML部分：

  <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (92).jpeg"">
        <img  src="image/load.gif" alt="" data-original="image/图片 (1).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (2).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (19).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (23).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (33).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (37).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (38).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (39).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (40).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (41).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (42).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (43).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (44).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (45).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (46).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (47).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (48).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (49).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (50).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (51).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (52).jpg">
        <img  src="image/load.gif"alt="" data-original=" image/图片 (53).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (54).jpg">

为什么有两个路径？因为一个img中有一张真图片和一张假图片，我们得用先用假图片进行加载，然后用真图片去替换，下图中假图片为左侧，真图片为右侧

script部分：

    <script>
        let view = document.documentElement.clientHeight;//获取浏览器窗口可视区的高度
        function fn1(){
            setTimeout(function lazyload() {    //添加一个定时器一秒钟后开始执行
            let imgs = document.querySelectorAll('img');    // 获取所有img标签
            // console.log(imgs);
            for (let item of imgs) {                // 使用for-of遍历所有图片
                // 显示图片出现在浏览器的位置
                let rect = item.getBoundingClientRect();    // 找到每一个图片在可视区上的位置
                console.log(rect);
                if (rect.bottom >= 0 && rect.top < view) {    //给个if语句如果图片的底部大于0并且小于这个浏览器的可视区域 ，就执行以下操作
                    item.src = item.getAttribute('data-original')    // 获取data-original的路径传给img
                }
            }
        },1000)
        }
        fn1();
        document.addEventListener('scroll',fn1)    //当滚动事件发生时就开始执行fn1函数里的任务
    </script>

为什么用for-of而不用for-in或者for循环？具体可以去参考ES6中for-of获取的是什么

效果如下：

完整代码：

<!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>懒加载</title>
    <style>
        img {
            width: 400px;
            height: 300px;
            display: block;
        }
        .row{
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (92).jpeg"">
        <img  src="image/load.gif" alt="" data-original="image/图片 (1).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (2).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (19).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (23).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (33).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (37).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (38).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (39).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (40).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (41).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (42).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (43).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (44).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (45).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (46).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (47).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (48).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (49).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (50).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (51).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (52).jpg">
        <img  src="image/load.gif"alt="" data-original=" image/图片 (53).jpg">
        <img  src="image/load.gif" alt="" data-original="image/图片 (54).jpg">
    <script>
        let view = document.documentElement.clientHeight;
        function fn1(){
            setTimeout(function lazyload() {
            let imgs = document.querySelectorAll('img');
            // console.log(imgs);
            for (let item of imgs) {
                // 显示图片出现在浏览器的位置
                let rect = item.getBoundingClientRect();
                console.log(rect);
                if (rect.bottom >= 0 && rect.top < view) {
                    item.src = item.getAttribute('data-original')
                }
            }
        },1000)
        }
        fn1();
        document.addEventListener('scroll',fn1)
    </script>
</body>

</html>

下面附上加载图片，当然了也可以自己找的（自己找的话我觉得挺麻烦的 —.—），如果其他图片也“懒”的自己找的话可以私我我整理好发给你 ღ( ´･ᴗ･` )

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

Vue.js如何实现路由懒加载浅析

前言懒加载也就是延迟加载,不知道大家在工作中有没有发现,当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间.幸运的是:vue-router支持WebPack内置的异步模块加载系统.所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载.话不多说了,来一起看看详细的实现过程: 使用假设你的路由配置是这样的: import MainPage from './routes/MainPage.vue' i
javascript实现图片预加载和懒加载

本文实例为大家分享了javascript实现图片预加载和懒加载的具体代码,供大家参考,具体内容如下预加载预加载是预先加载好后面需要用到的资源, 后面使用的时候直接去缓存里取.举个栗子, 比如一个网站的开场动画, 这些动画是由很多图片组成的, 假如不预先加载好, 那就会造成动画不流畅产生闪动白屏.图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,保证了图片快速.无缝地发布,使用户在浏览你网站内容时获得更好的用户体验. //这里我把图片数量写死了,而且对图片名也有要求必须是阿拉伯数字后缀
js实现图片懒加载效果

本文实例为大家分享了js图片懒加载的具体代码,供大家参考,具体内容如下图片懒加载,思路:当鼠标滑动到对应图片的高度时,进行图片的加载: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div{ width: 575px; height: aut
JS实现图片懒加载(lazyload)过程详解

对于图片较多的页面,使用懒加载可以大幅提高页面加载速度,提高用户体验. 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 原理
js 图片懒加载的实现

1.使用场景当网页上有大量图片需要加载时,如果一次性将图片全部加载完,网页加载时间会过长: 网页本身已经反应很慢了,如果你的页面上又需要引用图片,这时候同样是雪上加霜. 2.图片懒加载原理图片懒加载,只不过是叫法比较高大上而已,其实现方式很简单,就是在需要的时候再给图片的src属性赋值,仅此而已. 3.代码实现 /** * 图片懒加载 */ function ImgLazyLoad() { /** * 滚动到图片所在位置再加载 * @param imgId * 懒加载图片的ID * @par
利用原生JS实现懒加载lazyLoad的三种方法总结

目录前言 Method 1: 高度对比 Method 2: 使用getBoundingClientRect() 的API Method 3: 采用最新的 IntersectionObserver 构造函数总结前言首先我们先搭建好页面如下: <style> * { padding: 0%; margin: 0%; } .contain img { width: 600px; height: 400px; } ul { list-style: none; } li { display: i
JavaScript懒加载详解

目录懒加载 CSS样式: HTML部分: script部分 : 总结懒加载顾名思义比较懒,不想全部加载出来,当用户什么时候想看我在加载后面的东西概括:懒加载其实就是延时加载,即当对象需要用到的时候再去加载. 实现原理: 首先你要有很多个第一张用来加载的图片,加载完毕之后显示后面所需的图片步骤实现: 1.加载load图片 2.判断哪些图片要加载 3.隐形加载图片 4.替换真图片 CSS样式: <style> img { width: 400px; height: 300px; disp
Javascript 异步加载详解(浏览器在javascript的加载方式)

一.同步加载与异步加载的形式 1. 同步加载我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行. js 之所以要同步执行,是因为 js 中可能有输出 document 内容.修改dom.重定向等行为,所以默认同步执行才是安全的. 以前的一般建议
JavaScript懒加载与预加载原理与实现详解

目录 1.懒加载 1.1.什么是懒加载 1.2.为什么要使用懒加载 1.3.懒加载的优点 1.4.懒加载的原理 1.5.懒加载的实现步骤 1.6.懒加载的实现方式 2.预加载 2.1.什么是预加载 2.2.为什么要使用预加载 2.3.实现预加载的方法 1.懒加载 1.1.什么是懒加载懒加载也可以叫做延迟加载,当访问一个页面的时候,先把img元素伙食其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样只需要请求一次,俗称占位图): 只有当图片出现在浏览器的可视区域内时,才这只图片真正
webpack的懒加载和预加载详解

目录正常加载懒加载预加载没有使用预加载使用预加载总结正常加载为了看的方便,index.js中的代码非常简单 console.log('index.js执行了') import { test } from './test.js' document.getElementById('btn-wrap').onclick = function () { test() } test.js console.log('test.js执行了') export function test() {
Node.js模块加载详解

JavaScript是世界上使用频率最高的编程语言之一,它是Web世界的通用语言,被所有浏览器所使用.JavaScript的诞生要追溯到Netscape那个时代,它的核心内容被仓促的开发出来,用以对抗Microsoft,参与当时白热化的浏览器大战.由于过早的发布,无可避免的造成了它的一些不太好的特性. 尽管它的开发时间很短,但是JavaScript依然具备了很多强大的特性,不过,每个脚本共享一个全局命名空间这个特性除外. 一旦Web页面加载了JavaScript代码,它就会被注入到全局命名空间,
利用Kotlin的协程实现简单的异步加载详解

前言众所周知在android中当执行程序的耗时超过5秒时就会引发ANR而导致程序崩溃.由于UI的更新操作是在UI主线程进行的,理想状态下每秒展示60帧时人眼感受不到卡顿,1000ms/60帧,即每帧绘制时间不应超过16.67ms.如果某项操作的耗时超过这一数值就会导致UI卡顿.因此在实际的开发中我通常把耗时操作放在一个新的线程中(比如从网络获取数据,从SD卡读取图片等操作),但是呢在android中UI的更新只能在UI主线程中进行更新,因此当我们在非UI线程中执行某些操作的时候想要更新UI就需
PHP中的use关键字及文件的加载详解

前言可能在大家经常使用框架,写一个Controller或者Model的时候,写了好多use,但是并没有写文件加载的代码,就以为use可以进行文件的自动加载了. 详细介绍其实,现在流行的php框架,都是基于MVC模式的,大量的使用了命名空间,以提高程序的灵活性.那么框架是怎么实现将use关键字所声明的类库对应的脚本文件进行加载的那? (1):在通过use关键字进行声明类库的声明的时候,并不会进行脚本的加载,而是在脚本文件真正使用到所对应的类库的时候才会进行加载(这就是所谓延迟加载). (2):
vue在使用ECharts时的异步更新和数据加载详解

前言最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:http://www.jb51.net/article/128790.htm 下面话不多说了,来一起看看详细的介绍吧. 使用方法使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面) <script src="public/js/echarts.common.min.js&quo
Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

目录路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法路由的拆分项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. require.context() 是webpack提供的语法, 相当于前端的读写文件,返回的 files是一个函数,files.keys()执行,返回获取到的文件名(是一个数组),再通过files(keys)获取到模块,取到default 属性,拿到真正的导出对象. /router/home.router
详解JavaScript两个实用的图片懒加载优化方法

目录一.方法一二.方法二 InterSectionObserver 一.方法一重点: 1.getBoundingClientRect().top > window.innerHeight 图片未出现 2.getBoundingClientRect().top < window.innerHeight 图片出现了 HTML: <ul> ...... <li>2222222222</li> <li>2222222222</li> &

JavaScript懒加载详解

目录

懒加载

CSS样式：

HTML部分：

script部分 ：

总结

相关推荐

随机推荐

script部分：