当前位置： 首页 > article >正文

在网页加载时自动运行js的方法（2025最新）

article 2025/6/8 20:47:09

在网页加载时自动运行JavaScript方法有多种实现方式，以下是常见的几种方法：

1. ​​使用 DOMContentLoaded 事件​​

当初始HTML文档完全加载和解析后触发（无需等待图片等资源加载）：

document.addEventListener('DOMContentLoaded', function() {// 你的代码console.log('DOM已加载完毕！');
});

2. ​​使用 window.onload 事件​​

等待页面所有资源（图片、样式表等）加载完成后触发：

window.onload = function() {// 你的代码console.log('页面完全加载完毕！');
};

3. ​​直接在 <script> 标签中执行​​

将脚本放在 <body> 末尾，确保DOM已解析：

<body><!-- 页面内容 --><script>// 直接执行的代码console.log('脚本立即执行！');</script>
</body>

4. ​​使用 defer 属性​​

延迟脚本执行，直到HTML解析完成（按顺序执行）：

<head><script defer src="your-script.js"></script>
</head>

5. ​​使用 async 属性（异步加载）​​

脚本异步加载，下载完成后立即执行（不保证顺序）：

<head><script async src="your-script.js"></script>
</head>

6. ​​IIFE（立即调用函数表达式）​​

自动执行的匿名函数，适合模块化代码：

(function() {console.log('立即执行！');
})();

7. ​​现代框架的生命周期钩子​​

  • ​​Vue.js​​: 使用 mounted 钩子

    new Vue({el: '#app',mounted() {console.log('Vue实例已挂载！');}
});

  • ​​React​​: 使用 useEffect（函数组件）或 componentDidMount（类组件）

    useEffect(() => {console.log('组件已渲染！');
}, []);

注意事项：

  • ​​执行顺序​​：DOMContentLoaded 比 window.onload 更早触发。
  • ​​性能​​：避免在加载阶段执行耗时操作，以免阻塞渲染。
  • ​​框架兼容性​​：现代前端框架通常有自定义的生命周期方法。

根据你的需求选择合适的方式即可！

相关文章：

在网页加载时自动运行js的方法（2025最新）

在网页加载时自动运行JavaScript方法有多种实现方式&#xff0c;以下是常见的几种方法&#xff1a; 1. ​​使用 DOMContentLoaded 事件​​ 当初始HTML文档完全加载和解析后触发&#xff08;无需等待图片等资源加载&#xff09;&#xff1a; document.addEventListener(DOMC…...

编程日记 2025/6/8 20:47:09

在Windows下编译出llama_cpp_python的DLL后，在虚拟环境中使用方法

定位编译生成的文件 在VS2022编译完成后&#xff0c;在构建目录&#xff08;如build/Release或build/Debug&#xff09;中寻找以下关键文件&#xff1a; ggml.dll、ggml_base.dll、ggml_cpu.dll、ggml_cuda.dll、llama.dll&#xff08;核心动态链接库&#xff09; llama_cp…...

编程日记 2025/6/8 20:46:07

CSS radial-gradient函数详解

目录 基本语法 关键参数详解 1. 渐变形状&#xff08;Shape&#xff09; 2. 渐变大小&#xff08;Size&#xff09; 3. 中心点位置&#xff08;Position&#xff09; 4. 颜色断点&#xff08;Color Stops&#xff09; 常见应用场景 1. 基本圆形渐变 2. 椭圆渐变 3. 模…...

编程日记 2025/6/8 20:45:06

n8n 自动化平台 Docker 部署教程（附 PostgreSQL 与更新指南）

n8n 自动化平台 Docker 部署教程&#xff08;附 PostgreSQL 与更新指南&#xff09; n8n 是一个强大的可视化工作流自动化工具&#xff0c;支持无代码或低代码地集成各种服务。本文将手把手教你如何通过 Docker 快速部署 n8n&#xff0c;并介绍如何使用 PostgreSQL、设置时区以…...

编程日记 2025/6/8 20:44:04

关于datetime获取时间的问题

import datetime print(datetime.now())如果用上述代码&#xff0c;会报错&#xff1a; 以下才是正确代码&#xff1a; from datetime import datetime print(datetime.now()) 结果&#xff1a; 如果想格式化时间&#xff0c;使用代码&#xff1a; from datetime import da…...

编程日记 2025/6/8 20:43:03

前端面试五之vue2基础

1.属性绑定v-bind&#xff08;&#xff1a;&#xff09; v-bind 是 Vue 2 中用于动态绑定属性的核心指令&#xff0c;它支持多种语法和用法&#xff0c;能够灵活地绑定 DOM 属性、组件 prop&#xff0c;甚至动态属性名。通过 v-bind&#xff0c;可以实现数据与视图之间的高效同…...

编程日记 2025/6/8 20:42:02

使用python实现奔跑的线条效果

效果&#xff0c;展示&#xff08;视频效果展示&#xff09;&#xff1a; 奔跑的线条 from turtle import * import time t1Turtle() t2Turtle() t3Turtle() t1.hideturtle() t2.hideturtle() t3.hideturtle() t1.pencolor("red") t2.pencolor("green") t3…...

编程日记 2025/6/8 20:41:00

Oracle 审计参数：AUDIT_TRAIL 和 AUDIT_SYS_OPERATIONS

Oracle 审计参数&#xff1a;AUDIT_TRAIL 和 AUDIT_SYS_OPERATIONS 一 AUDIT_TRAIL 参数 1.1 参数功能 AUDIT_TRAIL 是 Oracle 数据库中最核心的审计控制参数&#xff0c;决定审计记录的存储位置和记录方式。 1.2 参数取值及含义 取值说明适用场景NONE禁用数据库审计测试环…...

编程日记 2025/6/8 20:39:58

Android LinearLayout、FrameLayout、RelativeLayout、ConstraintLayout大混战

一、为什么布局性能如此重要&#xff1f; 在Android应用中&#xff0c;布局渲染耗时直接决定了界面的流畅度。根据Google官方数据&#xff0c;超过60%的卡顿问题源于布局性能不佳。本文将彻底解析三大传统布局的性能奥秘&#xff0c;并提供可直接落地的优化方案。 二、三大布局…...

编程日记 2025/6/8 20:38:55

Unity版本使用情况统计（更新至2025年5月）

UWA发布&#xff5c;本期UWA发布的内容是Unity版本使用统计&#xff08;第十六期&#xff09;&#xff0c;统计周期为2024年11月至2025年5月&#xff0c;数据来源于UWA网站&#xff08;www.uwa4d.com&#xff09;性能诊断提测的项目。希望给Unity开发者提供相关的行业趋势作为参…...

编程日记 2025/6/8 20:37:52

GPUCUDA 发展编年史：从 3D 渲染到 AI 大模型时代（上）

目录 文章目录 目录1960s~1999&#xff1a;GPU 的诞生&#xff1a;光栅化&#xff08;Rasterization&#xff09;3D 渲染算法的硬件化实现之路 学术界算法研究历程工业界产品研发历程光栅化技术原理光栅化技术的软件实现&#xff1a;OpenGL 3D 渲染管线设计 1. 顶点处理&…...

编程日记 2025/6/8 20:35:35

人机融合智能 | 可穿戴计算设备的多模态交互

可穿戴计算设备可以对人体以及周围环境进行连续感知和计算,为用户提供随时随地的智能交互服务。本章主要介绍人机智能交互领域中可穿戴计算设备的多模态交互,阐述以人为中心的智能穿戴交互设计目标和原则,为可穿戴技术和智能穿戴交互技术的设计提供指导,进而简述支持智能穿戴交…...

编程日记 2025/6/8 20:34:34

Impromptu VLA：用于驾驶视觉-语言-动作模型的开放权重和开放数据

25年5月来自清华和博世的论文“Impromptu VLA: Open Weights and Open Data for Driving Vision-Language-Action Models”。 用于自动驾驶的“视觉-语言-动作” (VLA) 模型前景光明&#xff0c;但在非结构化极端场景下却表现不佳&#xff0c;这主要是由于缺乏有针对性的基准测…...

编程日记 2025/6/8 20:33:30

AI智能体，为美业后端供应链注入“智慧因子”(4/6)

摘要&#xff1a;本文深入剖析美业后端供应链现状&#xff0c;其产品具有多样性、更新换代快等特点&#xff0c;原料供应和生产环节也面临诸多挑战。AI 智能体的登场为美业后端供应链带来变革&#xff0c;包括精准需求预测、智能化库存管理、优化生产计划排程、升级供应商管理等…...

编程日记 2025/6/8 20:31:27

跨平台资源下载工具：res-downloader 的使用体验

一款基于 Go Wails 的跨平台资源下载工具&#xff0c;简洁易用&#xff0c;支持多种资源嗅探与下载。res-downloader 一款开源免费的下载软件(开源无毒、放心使用)&#xff01;支持Win10、Win11、Mac系统.支持视频、音频、图片、m3u8等网络资源下载.支持视频号、小程序、抖音、…...

编程日记 2025/6/8 20:30:25

ps蒙版介绍

一、蒙版的类型 Photoshop中有多种蒙版类型&#xff0c;每种适用于不同的场景&#xff1a; 图层蒙版&#xff08;Layer Mask&#xff09; 作用&#xff1a;控制图层的可见性&#xff0c;黑色隐藏、白色显示、灰色半透明。特点&#xff1a;可随时编辑&#xff0c;适合精细调整。…...

编程日记 2025/6/8 20:29:19

数据湖是什么？数据湖和数据仓库的区别是什么？

目录 一、数据湖是什么 &#xff08;一&#xff09;数据湖的定义 &#xff08;二&#xff09;数据湖的特点 二、数据仓库是什么 &#xff08;一&#xff09;数据仓库的定义 &#xff08;二&#xff09;数据仓库的特点 三、数据湖和数据仓库的区别 &#xff08;一&#…...

编程日记 2025/6/8 20:28:18

用Ai学习wxWidgets笔记——在 VS Code 中使用 CMake 搭建 wxWidgets 开发工程

声明&#xff1a;本文整理筛选Ai工具生成的内容辅助写作&#xff0c;仅供参考 >> 在 VS Code 中使用 CMake 搭建 wxWidgets 开发工程 下面是一步步指导如何在 VS Code 中配置 wxWidgets 开发环境&#xff0c;包括跨平台设置&#xff08;Windows 和 Linux&#xff09;。…...

编程日记 2025/6/8 20:27:14

【深度学习新浪潮】如何入门三维重建？

入门三维重建算法技术需要结合数学基础、计算机视觉理论、编程实践和项目经验，以下是系统的学习路径和建议： 一、基础知识储备 1. 数学基础 线性代数：矩阵运算、向量空间、特征分解（用于相机矩阵、变换矩阵推导）。几何基础：三维几何（点、线、面的表示）、射影几何（单…...

编程日记 2025/6/8 20:26:09

Android实现点击Notification通知栏，跳转指定activity页面

效果 1、点击通知栏通知&#xff0c;假如app正在运行&#xff0c;则直接跳转到指定activity显示具体内容&#xff0c;在指定activity中按返回键返回其上一级页面。 2、点击通知栏通知&#xff0c;假如app已经退出&#xff0c;先从SplashActivity进入&#xff0c;显示app启动界…...

编程日记 2025/6/8 20:24:59

Codeforces Round 1025 (Div. 2) B. Slice to Survive

Codeforces Round 1025 (Div. 2) B. Slice to Survive 题目 Duelists Mouf and Fouad enter the arena, which is an n m n \times m nm grid! Fouad’s monster starts at cell ( a , b ) (a, b) (a,b), where rows are numbered 1 1 1 to n n n and columns 1 1 1 t…...

编程日记 2025/6/8 20:23:53

ubuntu中使用docker

上一篇我已经下载了一个ubuntu:20.04的镜像&#xff1b; 1. 查看所有镜像 sudo docker images 2. 基于本地存在的ubuntu:20.04镜像创建一个容器&#xff0c;容器的名为cppubuntu-1。创建的时候就会启动容器。 sudo docker run -itd --name cppubuntu-1 ubuntu:20.04 结果出…...

编程日记 2025/6/8 20:22:45

复制与图片文件同名的标签文件到目标路径

引言&#xff1a;在数据集构建中&#xff0c;我们经常需要挑选一些特殊类型的图片&#xff08;如&#xff1a;零件中有特殊脏污背景的图片&#xff0c;写论文的时候想单独对这类情况进行热力图验证&#xff09;。我们把挑选出来的图片放到一个文件夹下&#xff0c;这时候我想快…...

编程日记 2025/6/8 20:21:42

【深度学习-Day 24】过拟合与欠拟合：深入解析模型泛化能力的核心挑战

Langchain系列文章目录 01-玩转LangChain&#xff1a;从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块&#xff1a;四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain&#xff1a;从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

编程日记 2025/6/8 20:19:09

[ElasticSearch] DSL查询

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…...

编程日记 2025/6/8 20:16:39

iview中的table组件点击一行中的任意一点选中本行

<Table border ref"selection" size"small" on-row-click"onClickRow"></Table>// table组件点击一行任意位置选中onClickRow(row, index) {this.$refs.selection.toggleSelect(index)}写上toggleSelect(index)方法即可&#xff0c;…...

编程日记 2025/6/8 20:15:36

《探秘跨网段局域网IP广播：解锁网络通信的新姿势》

一、从基础出发：广播与跨网段 在计算机网络的世界中，广播域是一个至关重要的概念。简单来说，广播域是指网络中能接收任一台主机发出的广播帧的所有主机集合。当一台主机在广播域内发出一个广播帧时，同一广播域内的所有其他主机都可以收到该广播帧。在没有路由器或 VLAN 分割…...

编程日记 2025/6/8 20:14:34

Kafka 单机部署启动教程（适用于 Spark + Hadoop 环境）

&#x1f9ed; Kafka 单机部署启动教程&#xff08;适用于 Spark Hadoop 环境&#xff09; &#x1f4e6; 一、Kafka 版本选择 推荐使用 Kafka 2.13-2.8.1&#xff08;Scala 2.13&#xff0c;稳定适配 Spark 3.1.2 和 Hadoop 3.1.1&#xff09; 下载地址&#xff08;Apache 官…...

编程日记 2025/6/8 20:13:32

maven微服务${revision}依赖打包无法识别

1、场景描述 我现在又一个微服务项目&#xff0c;父pom的版本&#xff0c;使用<properties>定义好&#xff0c;如下所示&#xff1a; <name>ypsx-finance-center</name> <artifactId>ypsx-finance</artifactId> <packaging>pom</pack…...

编程日记 2025/6/8 20:12:29

2025年06月07日Github流行趋势

项目名称&#xff1a;netbird 项目地址url&#xff1a;https://github.com/netbirdio/netbird项目语言&#xff1a;Go历史star数&#xff1a;14824今日star数&#xff1a;320项目维护者&#xff1a;mlsmaycon, braginini, pascal-fischer, lixmal, pappz项目简介&#xff1a;使…...

编程日记 2025/6/8 20:11:27