开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jquery画面加载完执行

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的核心特性之一是能够方便地在文档加载完成后执行特定的代码。

相关优势

简化代码：jQuery 提供了简洁的语法，使得开发者能够用更少的代码实现相同的功能。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得开发者无需担心兼容性问题。
丰富的插件支持：jQuery 拥有大量的插件库，可以轻松扩展其功能。

类型

在 jQuery 中，有多种方式可以在页面加载完成后执行代码：

$(document).ready()：这是最常用的方法，表示在 DOM 完全加载完成后执行代码。
$(window).load()：这个方法在所有资源（包括图片、视频等）完全加载完成后执行代码。

应用场景

初始化页面元素：在页面加载完成后，初始化一些页面元素，如设置默认值、绑定事件等。
动态加载内容：在页面加载完成后，通过 Ajax 请求动态加载内容并插入到页面中。
执行动画效果：在页面加载完成后，执行一些动画效果，提升用户体验。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Document Ready Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Welcome to jQuery!</h1>

    <script>
        $(document).ready(function() {
            // 在这里编写页面加载完成后要执行的代码
            console.log("Document is ready!");
            $('h1').css('color', 'blue');
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：为什么 `$(document).ready()` 不起作用？

jQuery 库未正确加载：确保 jQuery 库已正确引入，并且路径正确。
jQuery 库未正确加载：确保 jQuery 库已正确引入，并且路径正确。
代码位置错误：确保 $(document).ready() 代码在 jQuery 库之后。
代码位置错误：确保 $(document).ready() 代码在 jQuery 库之后。
拼写错误：确保 $(document).ready() 拼写正确，没有拼写错误。
浏览器缓存：有时浏览器缓存可能导致脚本未正确加载，可以尝试清除缓存或使用无痕模式。

解决方法

检查 jQuery 库路径：确保路径正确，可以尝试使用 CDN 地址。
调整代码位置：确保 $(document).ready() 代码在 jQuery 库之后。
检查拼写：确保 $(document).ready() 拼写正确。
清除缓存：尝试清除浏览器缓存或使用无痕模式。

通过以上方法，可以解决 $(document).ready() 不起作用的问题。

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

有帮助

没帮助

相关·内容

jQuery页面加载完毕后执行事件

jquery的一种简写形式： alert("页面加载完成！")... onload必须等等页面中的图片、声音、图像等远程资源被加载完毕后才调用而jQuery中只需要页面结构被加载完毕。...jQuery中的页面加载完毕事件，表示的是页面结构被加载完毕。...$(document).ready(function() 只需要在浏览器把所有的HTML放入DOM tree之后就执行js效果，包括在加载外部图片等资源之前。...即当所有链接被鼠标单击的时候，都执行 alert(“Hello World!”); 也就是说页面加载时绑定，真正该触发时触发。

23.2K4 0

jquery等待特定元素加载再执行相关函数

jQuery.fn.wait = function (func, times, interval) { var _times = times || 100, //100次...clearInterval(_iIntervalID); } }, _interval); } return this; } 默认是执行...buyGoods_guige_goods").wait(function(){BuyNow();}) .buyGoods_guige_goods是需要等待出现的元素，BuyNow()是出现后需要执行的函数

2.3K2 0

jquery预加载图片

document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages

11K0 0

jquery 加载 - ready方法

原生JavaScript的window.onload 将获取元素的语句写到页面头部，会因为元素还没有加载而出错。...JavaScript为了避免加载页面的元素报错的问题，需要在加载之中增加window.onload方法。如下： ?...jQuery的ready方法相对的，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。...jQuery的ready方法示例 ? 因为页面没有加载完毕，所以JavaScript中直接获取页面元素就会导致报错。需要加上window.onload方法，如下： ? 此时，可以看到没有报错了。...那是现在再使用jQuery的ready方法，如下: ? 那么，再将ready方法，再简写一下，如下： ?

2.8K4 1

ajax请求完之前的loading加载

很多时候我们需要引入框架来开发项目，这时我们可能会遇到页面还没加载完源码出来了的问题，给用户一种不好的视觉体验，这是便需要loading加载了，来完善用户体验！ ?...1 /*loading.js*/ 2 // 加载HTML图 3 var _LoadingHtml = '加载中...'; 4 5 // 呈现loading效果 6 document.write(_LoadingHtml); 7 8 // 监听加载状态改变 9 document.onreadystatechange...= completeLoading; 10 11 // 加载状态为complete时移除loading效果 12 function completeLoading() { 13 if (document.readyState

2K4 0

jQuery实现图片懒加载

一、懒加载 1.什么是懒加载目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片...二、获取屏幕高度：jquery的height()和javascript的height 1、jquery的各种高度首先来说一说$(document)和$(window)，如下： $(document)...实现懒加载执行一次 lazyRender lazyRender(); var clock;...下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 lazyRender，若在300毫秒内再次滚动则清除原来的定时器 if(clock){

16.5K2 0

jQuery scroll（滚动）延迟加载

延迟加载 $(window).scroll(function(){ var scrollHeight = $(document).height(); //文档高度 var scrollTop...scrollTop - windowHeight < 100 ){ console.log("到底了"); //ajax渲染页面 } }); jQuery...(function($){ var topicBoxTopHeight = jQuery('#topicBox').offset().top; var topicBoxTopHeight_show

12.1K11 0

JQuery之图片懒加载

由于现在很多的网站都带有大量的图片，而图片的加载又会特别的慢，特别是在移动端，懒加载就显的特别重要了，说白了就是按需加载，用户要看到哪里就显示哪里，下面来记录一下懒加载的基本实现步骤！...1.引入jquery.js与jquery.lazyload.js，由于jquery.lazyload.js依赖于jquery，所以必须要引入jquery jquery.js"> jquery.lazyload.js"> 2.配置lazyload...//图片在距离屏幕 200 像素时提前加载. 　　　　...图片的宽和高可以写在class里在请求完图片数据循环完成时调用

6.5K1 0

EasyGBS播放画面持续处于加载中问题排查

image.png 在某个项目测试中，EasyGBS播放画面处于加载中，无法播放视频： image.png 排查发现设备端播放是正常的，没有异常。

5803 0

JQuery ztree 异步加载实践

因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的！原始参考：JQuery异步加载实例，相对来说这篇博客还算规整！...springMVC中中文乱码问题：解决办法准备工作 1 JQuery ZTree，下载地址　　复制其中的JS和CSS即可，其实没必要引那么多，用什么引什么就可以。 ?...css/zTreeStyle/zTreeStyle.css" type="text/css"> jquery...-1.4.4.min.js"> jquery.ztree.core-3.5.js

2.9K7 0

JavaScript+HTML+CSS实现12种常见加载画面

在现代Web开发中，加载动画不仅可以提升用户体验，还能在后台处理数据时有效地吸引用户注意力。本篇博客将通过原生的JavaScript、HTML和CSS技术，详细介绍12种常见的加载中画面的实现方法。...dot"> 加载中...：一个经典的转圈加载动画，常见于许多网站的加载提示中。...，适合显示加载进度的情况。...本文通过原生的JavaScript、HTML和CSS技术，详细介绍了12种常见的加载中动画效果。这些动画效果各具特色，从简单的光点闪烁到复杂的折纸效果，涵盖了多种设计需求。

1.9K3 2

延迟加载图片的jQuery插件-Lazy Load Plugin for JQuery

Lazy Load是一个用Javascript写得jQuery插件。它可以使一个长网页中，不在当前视图中的图片延迟加载，以提高页面的载入速度。...然后在你的代码中加入,就可以了 $("img.lazy").lazyload(); 设置延迟加载参数 $("img.lazy").lazyload({ threshold : 200 }); 这样，图片就可以在距离显示区域...200像素的时候就开始预先加载。...这个值可以是负值，表示提前加载。...使用特效 $("img.lazy").lazyload({ effect : "fadeIn" }); 默认延迟加载使用show方法来显示图片，可以用这个方法来改变图片的显示方法。

6.1K1 0

子线程如何等待主线程执行完再执行

比如我们需要在一个巨大的业务逻辑方法中需要临时执行一些特殊的业务逻辑，但是这部分逻辑对主线程的执行结果不影响，那么我们就需要开一个子线程执行。...假设子线程执行的部分业务是需要依赖主线程执行的结果（数据库的数据）的话，就必须要保证执行子线程的时候，主线程已经执行完毕（提交了事务）。...第一个方法用来实现业务的主要逻辑，第二个方法用来处理特殊的操作，第一个方法上我们单独开一个事务(propagation = Propagation.REQUIRES_NEW)，再执行第二个方法时第一个方法事务已经提交...第二种：考虑到复杂系统的代码维护难度，对代码改动过大的话可能会产生不可预测的严重后果，老板可能就不介意对现有的方法做拆分，在这种情况下如何保证主方法已执行完呢。...,user);上面是通过获取父线程的线程状态来判断父线程是否已经执行完成，然后再保守等待15秒的时间

6641 0

iOS实现多个网络请求ABC执行完再执行D

dispatch_semaphore_wait(semaphore, DISPATCH_TIME_FOREVER); [self requestA:^{ NSLog(@"---执行...semaphore, DISPATCH_TIME_FOREVER); [self requestB:^{ NSLog(@"---执行...dispatch_group_create(); dispatch_group_enter(group); [self requestA:^{ NSLog(@"---执行...dispatch_group_notify(group, globalQueue, ^{ [self requestD:^{ NSLog(@"---执行...D任务结束---"); }]; }); - (void)requestA:(void(^)(void))block{ NSLog(@"---执行A任务开始---");

1.6K1 0

Ajax与jQuery异步加载数据

Ajax刚好可以解决数据异步加载的问题。...由于用 jQuery 实现 ajax 比较简单，因此接下来的代码引用jQuery库实现Ajax，另外使用Django作为框架。其中jQuery可以手动下载放到本地文件夹中，也可以引用下面的语句。...XHTML 1 jquery/1.11.1/jquery.min.js"> HTML语句类别为demo...的div将展示Ajax数据 (document).ready(function(){})指页面其他元素加载完成后开始加载Ajax数据，此时，浏览器不会有加载条和转圈的情况出现。...当然也可以改为点击某个元素加载例如(‘#demo’).click(function(){})。

12.9K2 0

【详解】if语句执行完else语句真的不会再执行吗？

if语句执行完else语句真的不会再执行吗？在编程中，if-else 语句是一种常用的条件控制结构。它允许程序根据不同的条件执行不同的代码块。...else: # 条件为假时执行的代码执行流程条件判断：首先，程序会评估 if 语句中的条件表达式。...当条件为真时，执行 if 块中的代码；当条件为假时，执行 else 块中的代码。重要的是，一旦其中一个块被执行后，程序会跳过另一个块，继续执行后续代码。...这意味着，如果 if 块的代码被执行了，那么 else 块的代码将不会被执行，反之亦然。每个 if-else 结构只会选择一条路径执行。...因此，程序会执行 if 块中的代码，打印出 "x is greater than 5"。由于 if 块的代码已经执行了，程序不会执行 else 块中的代码。

4301 0

java 主线程等待子线程执行完后再执行

这里记录一下下面这种情况：主线程需要等待多个子线程执行完后再执行。...java.util.concurrent.CountDownLatch; /** * Author: yunqing * Date: 2018/7/18 * Description:线程测试 * 测试点：主线程等待子线程全部执行完后再执行...，子线程还没执行完时，主线程进来了。...1.使用CountDownLatch 示例如下，我们初始化一个CountDownLatch，值为10（子线程个数），然后每次一个子线程执行完后执行一下countDown()，代码示例如下： package...java.util.concurrent.TimeUnit; /** * Author: yunqing * Date: 2018/7/18 * Description:线程测试 * 测试点：主线程等待子线程全部执行完后再执行

5.3K2 0

jquery预加载的几种例子

实际编写前端页面时，有时候希望一打开某个页面就加载一些方法。下面是4种预加载方法。...①页面加载完之前执行，与嵌入的js加载方式一样(写jquery插件的时候使用) (function ($) { alert('start'); })(jQuery); ②页面加载后执行。...$(document).ready(function(){ alert('jquery ready'); }); ③页面加载后执行。...$(function(){ alert('jquery onload'); }); ④页面加载后执行。...jQuery(function($) { alert('jQuery ready '); });

6580 0

基于jQuery，图片加载loading加载层动画开源库

简要说明 ProgressBar.js是一款jQuery图片加载loading加载层动画开源插件库。该插件库在图片加载时，为图片添加垂直的图片逐渐显示效果，非常炫酷。 ? ? ?.../src/jquery.min.js"> jquery.progressbar.js"> HTML结构 <div id="divDuck1...backgroundOpacity: 1 }); javascript 普通垂直加载图片效果

2.7K2 0

vscode源码分析【八】加载第一个画面

按道理来说应该加载一个页面用于展现UI的呀？...config))}`; 这个require.toUrl方法采用通用的模块ID路径转化规则,将模块ID字符解析成URL路径；注意：file:///协议开头的URL路径；至此，这个窗口总算显示出了一个画面...这个页面body里并没有任何东西；只加载了一个js文件后面我们再继续聊这个js文件的逻辑！

1.3K5 1

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭