开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

页面完全加载jquery3时显示预加载器

页面完全加载jQuery 3时显示预加载器是通过在页面加载过程中使用jQuery库来实现的一种技术。预加载器可以在页面内容加载完成之前显示一个加载动画或进度条，以提升用户体验并表明页面正在加载中。

实现这个功能的核心是通过jQuery的一些方法和事件来控制页面加载的过程。下面是一个实现该功能的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>页面加载预加载器示例</title>
  <script src="jquery-3.0.0.min.js"></script> <!-- 引入jQuery库 -->
  <style>
    /* 预加载器样式 */
    .preloader {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      background-color: #ccc;
      /* 这里可以设置为加载动画或进度条的样式 */
    }
  </style>
  <script>
    $(document).ready(function() {
      // 在页面加载开始时显示预加载器
      var preloader = $('<div class="preloader"></div>');
      $('body').prepend(preloader);

      // 当页面加载完成时隐藏预加载器
      $(window).on('load', function() {
        preloader.hide();
      });
    });
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

上述代码使用了jQuery的$(document).ready()函数，它会在页面DOM结构加载完成后执行回调函数。在回调函数中，我们创建一个预加载器元素，并将其插入到页面的最前面。然后，使用$(window).on('load', function() {...})来监听整个页面内容加载完成的事件，当事件触发时，隐藏预加载器。

这种技术可以用于各种需要加载较多内容的网页，例如图库、视频网站、社交媒体等。通过显示预加载器，可以让用户清楚地知道页面正在加载中，避免用户对加载时间过长的不耐烦和焦虑。同时，预加载器也可以用来展示加载进度条，让用户了解加载的进展情况。

对于腾讯云的相关产品，可以使用腾讯云的云存储服务 COS（腾讯云对象存储），将页面所需的资源文件（如预加载器的CSS、图片等）存储到云端，并通过腾讯云的CDN（内容分发网络）服务加速资源的访问，提升页面加载速度和用户体验。具体的产品介绍和链接如下：

腾讯云对象存储（COS）：腾讯云提供的可扩展、高可靠、低成本的云存储服务，用于存储和管理大量的非结构化数据。了解更多：腾讯云对象存储（COS）
腾讯云内容分发网络（CDN）：腾讯云提供的全球覆盖的内容分发网络，可加速内容的传输和分发，提升用户访问网站的速度和体验。了解更多：腾讯云内容分发网络（CDN）

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据，通过预加载器技术网页的加载性能提升了19%，Chrome测试了 Alexa 排名前2000名网站，性能有20%的提升。它并不是一门新技术，有人认为只有 Chrome 才具备这个功能。也有人认为它是有史以来提升浏览器性能最有效的方法。如果你第一次接触预加载器，也许心中已经有了无数个问号。什么是预加载器？它是如何提升浏览器性能的？首先需要了解浏览器是如何加载网页的一个网页的加载依赖于脚本文件、CSS样式文件。

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据，通过预加载器技术网页的加载性能提升了19%，Chrome测试了 Alexa 排名前2000名网站，性能有20%的提升。它并不是一门新技术，有人认为只有 Chrome 才具备这个功能。也有人认为它是有史以来提升浏览器性能最有效的方法。如果你第一次接触预加载器，也许心中已经有了无数个问号。什么是预加载器？它是如何提升浏览器性能的？首先需要了解浏览器是如何加载网页的一个网页的加载依赖于脚本文件、CSS样式文件。

实现图片懒加载（及优化相关）

工作之余想要休闲一下（看-美-女-图），但是又觉得单纯休闲不利于自身进步，于是 ……

01

Resource Hints 知多少

在上篇文章探究网页资源究竟是如何阻塞浏览器加载的中介绍到 JS 会阻塞 DOM 的加载，样式会阻塞页面的渲染，外链样式里的自定义字体还会对文字造成闪动给用户带来不好的体验，诸如此类问题还有挺多，那到底该如何解决它们呢？

02

对 Sea.js 进行配置 seajs.config

值为 true 时，加载器不会删除动态插入的 script 标签。插件也可以根据 debug 配置，来决策 log 等信息的输出。

02

Web性能优化：不要与浏览器预加载扫描器对抗

优化页面速度的一个被忽视的方面就是要对浏览器的内部结构有一定的了解。浏览器进行了某些优化，以提高性能，而我们作为开发者却无法做到这一点——但前提是我们不能无意中阻挠这些优化。

在使用vue的项目中对于性能优化的处理

①. 图片大小优化，部分图片使用WebP（需要考虑webp兼容性）在线生成，如智图、又拍云 gulp生成，gulp-webp或gulp-imageisux canvas生成

02

jQuery开发技巧

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

02

lazyload图片延迟加载适用所有类型

LazyLoad大家再熟悉不过的一个jquery插件了，它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才会加载并显示出来，这和图片预加载的处理方式正好刚好相反。图片不多的页面时，效果并不太明显，但是当页面大图片比较多的时候，这种效果就比较显著了，明显加快了页面的加载速度。浏览器将会在加载可见图片之后即进入就绪状态，在某些情况下还可以帮助降低服务器负担。因此，比较流行的wordpress主题，typecho主题，emlog主题等都使用了lazyload图片延迟加载来实现快速加载页面。当然啦，你的网站纯文字的，就没必要多搞个jquery插件了。

01

收集的35个 jQuery 小技巧/代码片段，可以帮你快速开发.

注: 在版本jQuery 1.4中，.support 替换掉了.browser 变量

02

InstantClick,让你的网站快到起飞，PJAX技术

instantclick.js 是一种ajax无刷新和预加载页面的技术，对于普通博客程序，有着明显的加速作用。(instantclick.js ≈ pjax + 预加载页面)而且，使用方法也十分的简单。在github截止目前，已经由4447个star了，非常可观。

02

每个程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段，可以帮你快速开发. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fi

01

PC端、移动端的页面适配及兼容处理

劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如iphone系列）下会失真，且在非wifi情况下即使加了延时加载也易出现加载慢的情况。

02

程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段，可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the

00

instantclick中文文档

文档官网：http://instantclick.io/documentation 文档基于：instantclick 3.1.0版本翻译感谢；有道云翻译/谷歌翻译细节说明；部分基于自己理解有所改动，其中部分我没有接触过的位置，并没有进行翻译，以免误导特殊声明；文章允许转载，但是必须保留原文超链接出处，放置文章底部或者顶部方便查看位置！

03

跨平台移动APP开发进阶(二)：HTML5+、mui开发移动app教程[通俗易懂]

通过 HTML5 开发移动App 时，会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足，在W3C 中国的指导下成立了www.HTML5Plus.org组织，推出HTML5+规范。

02

12、webpack从0到1-Prefetching/Preloading

简单说下webpack中关于Prefetching/Preloading的设置。 git仓库：webpack-demo 1、是什么？首先解决的第一个问题就是prefetching和preloading这两个是个啥子东西？ preloading：设置这个指令，就会在当前的页面中，以较高优先级预加载某个资源。其实就相当于浏览器的预加载，但是浏览器的预加载只会加载html中声明的资源，但是preloading突破了这个限制，连css和js资源也可以预加载一波。 Prefetching：设置这个指令，

03

2022 Web 年鉴 — JavaScript

大家好，我是 ConardLi。今天带大家来解读一个比较权威的 JavaScript 年度报告，我们一起来看看今年的 JavaScript 到底是什么样子。

02

4-3~8 code-splitting，懒加载，预拉取，预加载

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。

02

完善lazyload懒加载图片渐显特效

作者：matrix 被围观: 3,367 次发布时间：2013-09-03 分类：Wordpress 兼容并蓄 | 无评论 »

02

前端开发者都应知道的 jQuery 小技巧

Matt Smith 发起的一个小项目，目前已有 15 个小技巧。伯乐在线会持续跟进更新。

03

【胖虎的逆向之路】01——动态加载和类加载机制详解

之前一直了解到加壳脱壳，直接使用Fart等脱壳工具进行的，停留在知其然不知其所以然的层次，所以以此准备进行Android 基础理论的学习中，首先要深入理解类加载器和动态加载二者之间的关系，本文记录了类加载器和动态加载之间的关系和原理，由于作者能力有限，会尽力的详细讲解两者之间的关系，如本文中有任何错误，烦请指正，感谢~

02

jQuery中的一些事件以及动画

加载事件我们有两种方式，一种就是javascript直接写：window.onload来加载。还有一种就是我们的jQuery中的加载方式$(function(){})

02

Web前端开发（高级）下册-目录

svgHTML5中使用svgsvg的基本语法svg内部标签几何图形标签路径标签文字标签

03

jQuery选择什么版本 1.x? 2.x? 3.x?

类似标题：jQuery选择什么版本？ jquery一般用什么版本？ jquery ie8兼容版本？jquery什么版本稳定？

01

JS图片预加载插件

在开发H5项目中有时候会遇到要加载大量图片的情况，利用预加载技术可以提高用户浏览时的体验。 1)概念：懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 2)区别：两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。服务器端区别：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。预加载可以

05

🔥【Angular教程】路由入门

路由的概念在前端的框架中得到了广泛的应用,对于路由的感念不做阐述,路由的应用无外乎就是嵌套、传参，高级一些的功能如懒加载、预加载，再高级一些的如：路由守卫等。本篇我们就一起来看一看在Angular中如何使用路由。

05

性能优化总结（四）：预加载的设计

本节说一下数据的预加载。这节的内容与SQL没什么关系。主要说的是在 GIX4项目中，我们是如何设计符合需求的预加载类库的。内容如下：什么是预加载，为什么要用它？我们所需要的API 一个简单的例子什么是预加载？预加载其实就是在真正开始使用数据之前，先异步把数据加载好，等到需要使用时，就可以直接使用之前加载好的数据。这时，由于数据已经加载完成，而不用等待漫长的加载过程，所以程序的速度得到一个明显的提升。那么，什么时候需要使用它呢？我觉得，主要是这种情况：当我们可以预知

05

Android解析ClassLoader（二）Android中的ClassLoader

前言在上一篇文章我们学习了Java的ClassLoader，很多同学会把Java和Android的ClassLoader搞混，甚至会认为Android中的ClassLoader和Java中的ClassLoader是一样的，这显然是不对的。这一篇文章我们就来学习Android中的ClassLoader，来看看它和Java中的ClassLoader有何不同。 1.ClassLoader的类型我们知道Java中的ClassLoader可以加载jar文件和Class文件（本质是加载Class文件），这一点在A

08

JavaScript高级程序设计（第4版）- HTML中的JavaScript

XHTML(Extensible HyperText Markup Language) 是将 HTML 作为 XML 的应用重新包装的结果

05

微前端之qiankun微前端

微前端项目是将每一个可以独立开发，测试，部署的子项目集合到一个主项目之下。对于用户来说，主项目仍然是一个完整的产品，而整个组装的过程对于用户来说，是透明的。

07

简单介绍下modJS

该文介绍了如何使用modJS来加载模块，并解决了一些常见的问题。

05

PixiJS 修炼指南 - 03. 资源加载（上）

不知道有没有同学注意到，第一篇中我们创建精灵时使用的是 Sprite.from(textureUrl) 方法，但是第二篇重构后却改用了 Assets.load(textureUrl) 加载纹理，然后再设置到 this.texture 属性内来完成精灵纹理素材加载的。

07

第十五集：游戏资源加载器AssetManager

1.API定义：负责加载类似于Textures BitmapFonts Tilemaps Sounds Music 等类型的文件 2.示例：

02

21道关于性能优化的面试题(附答案)

性能优化部分的面试题主要考察应试者对网站性能优化的了解。如何做好性能优化，哪些操作会引起性能优化的问题，性能优化指标是什么等，都值得应试者关注。

02

awesome-javascript-cn

JS 资源列表，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。包管理器管理着 JavaScript 库，并提供读取和打包它们的工具。 npm：npm 是 JavaScript 的包管理器。官网 Bower：一个 web 应用的包管理器。官网 component：能构建更好 web 应用的客户端包管理器。官网 spm：全新的静态包管理器。官网 jam：一个专注于浏览器端和兼容 RequireJS 的包管理器。官网 jspm：流畅的浏览器包管理

08

【面试】1093- 21 道关于性能优化的面试题（附答案）

随着前端项目不断扩大，浏览器渲染的压力变得越来越重。配置好一点的计算机可以顺利地展现页面；配置低一些的计算机渲染页面的性能就不那么可观了。

02

简单介绍下modJS

近期把团队的项目构建迁移到fis3，同时把模块加载器也由之前的requirejs切换到了modJS。

05

淘宝承接页是如何实现秒开的

用户承接页，是承载上游的落地页，其核心职能是承接流量、转化用户。对用户增长业务来说，如何让用户更快看到页面，是影响用户决策、决定拉新成功的关键。用增承接页的目标用户是手淘低活用户，这部分人的手机设备中低端占比90%以上，网络条件也不稳定，这对于我们承接页的性能、体验提出了更高的要求。

04

微前端概述

Tech 导读本文由浅到深地对微前端进行了概括性介绍，读者可以了解到微前端的概念、微前端的特点与价值、微前端的实现方案、一个微前端框架应具备的功能，以及微前端的适用场景。读者可以多关注下本文提到的各个开源的优秀的微前端实现方案，通过对比及借鉴来实现一套适合自身业务的微前端方案。 01 微前端是什么传统的分而治之的策略已经无法应对现代 Web 应用的复杂性，因此衍生出了微前端这样一种新的架构模式，与后端微服务相同，它同样是延续了分而治之的设计模式，不过却以全新的方法来实现。微前端是一种由独立交付的多个前

04

Jvm 类加载机制解析，一起来了解神秘的类加载机制吧

当程序主动使用某个类时，如果该类还未被加载到内存中，系统会通过加载，连接，初始化，这三个步骤对类进行初始化，如果没有意外，JVM 将会连续完成这三个步骤，所以有时也称为类初始化。

03

Web图像组件设计的最佳实践

大家好，我是 ConardLi，网页中的图片处理一直是 Web 开发的一大挑战，今天跟大家来一起看看 Next.js 中的 Image 组件，我觉得这个组件的设计有很多值得借鉴的地方，可以作为图片组件设计的最佳实践。英文原文在这：https://web.dev/image-component/

02

Webpack Loader

Webpack不认识CSS（无法直接处理），就需要先由Loader加工一遍（预处理）

03

浏览器工作原理

有许多浏览器正在被使用，截至2022年，使用最多的是：谷歌浏览器、苹果的Safari、微软的Edge和火狐。

01

Typecho仿百度响应式主题Xaink

因为想学习响应式布局练练手，所以萌生了写一个typecho主题的想法，而我正好在使用百度，何不就做个和百度一样的主题

01

作为面试官，为什么我推荐微前端作为前端面试的亮点？

作为面试官，我经常听到很多候选人说在公司做的项目很简单，平常就是堆页面，写管理端，写H5,没有任何亮点，我以我一次面试候选人的经历分享给大家

01

一起详析“图片预加载”

HTML5学堂：2014年年初的时候，曾经在自己的博客“独行冰海”里写过关于图片预加载和懒加载的博文，当时的文章当中没有写什么关于预载的代码范例，当前打算把预载和懒载分开，讲解的再详细一些。本文主要讲解了图片预载是什么，为何使用预加载，使用预加载的好处以及具体的代码实现。图片预加载是什么让浏览区先显示其他的图片（一般使用LOGO）给浏览者看，等图片加载完了之后，再将图片显示。还有一种更为常见的预载，就是我们随处可见的loading条~~~在我们等待着loading条走完时，内容已经开始加载了~！为何

08

H5游戏开发指南

在上月底，一则有关HTML5游戏的的消息震惊业界，蝴蝶互动宣布旗下的《传奇世界》月流水破1500万，成为业内首款千万级别爆款游戏，这无疑给H5游戏行业注入了一针强心剂。从H5诞生以来，对于H5游戏一直唱衰不断，而这又一次把H5游戏推向风口浪尖。区别于寻常的Flash页游，此游戏采用了H5的Canvas技术，能在PC端和移动端跨平台运行。一直以来，游戏开发都是把前沿技术运用到极致的媒介，H5游戏也不例外，这篇文章会从带你从浅入手，深入H5游戏开发的世界。 1、准备条件 1.1、设计师应该注意的地方移动端最

Sublime插件推荐

HTML-CSS-JS Prettify HTML/CSS/JS/Vue等代码格式化

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭