jQuery:$(document).ready()在IE中太慢了 - 腾讯云开发者社区

文章/答案/技术大牛

发布

前端知识普及之页面加载

接下来我们要做的最后一件事，就是看看jquery老大哥，他的ready事件的原理到底是什么. jquery ready事件浅析 jquery主要做的工作就是兼容IE6,7,8实现DOMContentLoaded...我们来看一下jquery中实现doScroll的兼容: //低版本的IE浏览器，这里添加监听作为向下兼容，如果doScroll执行出现bug，也能保证ready函数的执行 document.attachEvent...//在ready里面会对执行做判断，确保只执行一次 var top = false; // 如果是IE且不是iframe就通过不停的检查doScroll来判断dom结构是否ready...document.body) { return setTimeout(jQuery.ready); } jQuery.isReady = true; //指示ready方法已被执行...(document, [jQuery]); if (jQuery.fn.trigger) { //解除引用 jQuery(document).trigger("ready

1.9K9 0

jquery $(document).ready()与window.onload的区别

本文链接：https://ligang.blog.csdn.net/article/details/42068199 jQuery中$(document).ready()的作用类似于传统JavaScript...在常规的 Javascript 代码中，通常使用 window.onload 方法，而在jQuery中，使用的是$(document).ready() 方法，极大的提高Web应用程序的速度。...另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。...Diego Perini 在 2007 年的时候，报告了一种检测 IE 是否加载完成的方式，使用 doScroll 方法调用。...原理是对于 IE 在非 iframe 内时，只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。

2.9K3 1

您找到你想要的搜索结果了吗？

是的

没有找到

01-老马jQuery教程-jQuery入口函数及选择器

jQuery有助于刚入门的开发人员，更深入的理解原生DOM的开发方式 jQuery库封装的的确非常经典，做一下小项目和简单的项目足够支撑第三方类库太丰富！...install jquery 2.入口函数介绍 2.1window.onload事件的问题在之前DOM课中咱们已经说过用window的onload事件作为JS代码的入口，时机并不好。...而且对于页面中的iframe等子页面也做了兼容处理。直接用如下的方法进行使用： // 第一种方式：给document绑定ready事件。...$(document).ready(function(){ // ....此处是页面DOM加载完成的入口 }); // 第二种方式：直接给jQuery的全局函数传入一个回调函数 $(function...$(document).ready(function () { console.log('ready2') }); <input type="button

3.2K10 0

onload 和 domready

事件熟悉 jQuery的人，都知道 DomReady 事件 $(document).ready(function(){ alert("jQuery 的 DOM 准备完毕，资源还没加载完"); }...，它是在 DOM 准备完毕后触发（不需等待资源下载完毕） DOMContentLoaded 事件在许多 Webkit 浏览器以及 IE9 上都可以使用，此事件会在 DOM 文档准备好以后触发，包含在 HTML5...标准中对于支持此事件的浏览器，直接使用 DOMContentLoaded 事件是最简单最好的选择 IE6,7,8 都不支持 DOMContentLoaded 事件。...所以目前所有的 hack 方法都是为了让 IE6,7,8支持 DOM Ready 事件下面代码可以发现 jQuery 的 ready 事件稍微早于 DOMContentLoaded 事件，但都是实现了...准备完毕，资源还没加载完"); }, false); // jQuery 的 domready $(document).ready(function(){ alert("jQuery 的 DOM

2.9K2 0

一、初识jQuery

版本选择 1.x：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4 (2016年5月20日). 2.x：不兼容ie678，相对1.x文件较小，官方只做BUG...维护，功能不再新增，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API...alert('hello tzk2') } 只会弹出 hello tzk2 $(document).ready(function () { alert('hello tzk1') }); $(document...第一种写法 $(document).ready(function () { alert('hello tzk') }); // 第二种写法 jQuery(document).ready(function...(function () { alert('hello tzk') }) jQuery的四种写法中，推荐使用第三种写法。

7042 0

项目中遇到的bug（web前端-持续更新）

, false ); // If IE event model is used } else if ( document.attachEvent ) {...); // If IE and not a frame // continually check to see if the document is ready...", DOMContentLoaded, false ); jQuery.ready(); }; } else if ( document.attachEvent...", DOMContentLoaded ); jQuery.ready(); } }; }...return; } // and execute any waiting functions jQuery.ready

1.3K2 0

配合JQuery练习

/jquery /jquery-1.4.min.js"> $(document).ready(function.../jquery /jquery-1.4.min.js"> $(document).ready(function(){.../jquery /jquery-1.4.min.js"> $(document).ready(function.../jquery /jquery-1.4.min.js"> $(document).ready(function(){.../libs/jquery/1.8.0/jquery.min.js"> $(document).ready(function(){ $("button").click

1.1K3 0

jQuery来源学习笔记：扩展的实用功能

// 在 jQuery 中，$ 仅仅是 jQuery 的别名，因此即使不使用 $ 也能保证全部功能性。...See #6781 // 一个计数器，用于跟踪在ready事件出发前的等待次数 readyWait: 1, // Hold (or release) the ready event...bound ready events if ( jQuery.fn.trigger ) { jQuery( document ).trigger( "ready...); // If IE and not a frame // continually check to see if the document is ready...// IE中能够使用window.execScript。 // 其它浏览器须要使用eval。 // 由于整个jQuery代码都是一整个匿名函数，所以当前context是jQuery。

8603 0

01-老马jQuery教程-jQuery入口函数及选择器

jQuery有助于刚入门的开发人员，更深入的理解原生DOM的开发方式 jQuery库封装的的确非常经典，做一下小项目和简单的项目足够支撑第三方类库太丰富！...而且对于页面中的iframe等子页面也做了兼容处理。直接用如下的方法进行使用： // 第一种方式：给document绑定ready事件。...$(document).ready(function(){ // ....此处是页面DOM加载完成的入口 }); // 第二种方式：直接给jQuery的全局函数传入一个回调函数 $(function...$(document).ready(function () { console.log('ready2') }); ie8以下的浏览器仅仅支持以下搜索的方法： document.getElementById(id) document.getElementsByTagName(tag) document.getElementsByName

3K0 0

javascript-继承之jquery

事件，如果是document 就将document对象插入到this.elements * 主要就是判断$(document).ready 和 $(function(){}) 这两种的ready...) { //判断IE document.attachEvent('onreadystatechange', function () { if (document.readyState...$.xxx() jQuery.fn.extend(object);给 jQuery 对象添加方法 $('#test').xxx() $.extend 常见用法 //在jquery全局对象中扩展一个net...事件，如果是document 就将document对象插入到this.elements * 主要就是判断$(document).ready 和 $(function(){}) 这两种的ready...) { //判断IE document.attachEvent("onreadystatechange", function () { if

1.4K3 0

jQuery原理（入口函数）

方法处理 else if (kjQuery.isFunction(selector)) { kjQuery.ready(selector); } 在ready函数中需要判断页面是否加载...当页面加载完成后在进行添加事件的操作。...ready: function (fn) { // 判断DOM是否加载完毕 if (document.readyState == "complete") { fn();...("DOMContentLoaded", function () { fn(); }); } else { // IE兼容 document.attachEvent...对象中返回选择器: 会将找到的所有元素存储到jQuery对象中返回 3.数组: 会将数组中存储的元素依次存储到jQuery对象中立返回

6K2 0

基于Web的商城后台管理系统的设计与实现

IE]> --> jquery-1.9.1.min.js"> IE]> window.jQuery || document.write("document).ready(function(){ $.each($(".submenu"),function(){ var $aobjs=$(this).children("li"...( document).ready(function(){ // $("#submit").click(function(){ // // var num=0; // var str="";...把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。不要漏掉教程中任何一个习题——请全部做完并做好笔记。水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。

2.1K2 0

JQuery 动画：为页面添彩的魔法

在现代的Web开发中，用户体验的提升是至关重要的一环。而动画作为页面交互中的重要组成部分，更是为用户带来了全新的感官体验。...JQuery 动画基础在 JQuery 中，动画主要基于两个核心方法：show()和hide()。这两个方法用于显示和隐藏元素，可以搭配参数来调整动画的速度。1....小结JQuery 动画是前端开发中不可或缺的一部分，它为页面注入了活力，为用户提供了更丰富的交互体验。...在实际应用中，巧妙地运用动画可以为页面增色不少，同时也要注意不要过度使用，以免影响用户体验。希望通过本篇博客，你能更好地理解和运用 JQuery 动画，为你的网页注入更多活力。...愿你的网页在动画的世界中绽放光彩！我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

1.4K1 0

【Java 进阶篇】JQuery 动画：为页面添彩的魔法

在现代的Web开发中，用户体验的提升是至关重要的一环。而动画作为页面交互中的重要组成部分，更是为用户带来了全新的感官体验。...JQuery 动画基础在 JQuery 中，动画主要基于两个核心方法：show()和hide()。这两个方法用于显示和隐藏元素，可以搭配参数来调整动画的速度。 1....小结 JQuery 动画是前端开发中不可或缺的一部分，它为页面注入了活力，为用户提供了更丰富的交互体验。...在实际应用中，巧妙地运用动画可以为页面增色不少，同时也要注意不要过度使用，以免影响用户体验。希望通过本篇博客，你能更好地理解和运用 JQuery 动画，为你的网页注入更多活力。...愿你的网页在动画的世界中绽放光彩！

9366 0

【前端】：async、defer、onload、DOMContentLoaded

行为模拟：在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll...2.3. jQuery.ready(fn) 源码摘录 API： // jQuery offers several ways to attach a function // that will run...when the DOM is ready. // All of the following syntaxes are equivalent: $( handler ) $( document ).ready...( handler ) $( "document" ).ready( handler ) $( "img" ).ready( handler ) $().ready( handler ) 源码摘录：...参考： jQuery .ready() API： https://api.jquery.com/ready/ DOMContentLoaded： https://developer.mozilla.org

2.2K2 0

JQuery 遍历：发现元素的魔法之旅

无需太多前端经验，只要有一颗探险的心，你就能在 JQuery 遍历中找到属于你的宝藏。前言在 Web 开发中，我们常常需要在页面中找到特定的元素，然后对它们进行操作。...遍历基础在 JQuery 中，遍历主要通过选择器和遍历方法实现。首先，我们来看一下基础的选择器。1. 元素选择器元素选择器是最简单的一种选择器，通过元素的标签名选择对应的元素。...这时就需要使用 JQuery 的遍历方法。遍历方法JQuery 提供了多种遍历方法，让你能够轻松地在文档中移动和操作元素。下面我们来介绍几个常用的遍历方法。...遍历的艺术JQuery 的遍历方法就像艺术家的画笔，让你能够在页面上自由地漫游，发现元素的美丽和奥秘。通过简单而强大的选择器和遍历方法，你可以轻松地定位、修改和操作页面上的任何元素。...愿你在遍历元素的旅程中，发现更多有趣的功能和技巧，成为一位真正的前端大师。愿你的代码如画笔一般，精妙而流畅，为用户带来愉悦的体验。继续探索，不断学习，让你的前端之路越走越宽广。

8421 1

16个超实用的jQuery技巧攻略

此外，jQuery还拥有各种插件，以帮助开发者在最短时间内快速创建网站/网页。 1）禁用右键单击功能如果你想为用户节省网站信息，那么开发者可以使用这段代码——禁用右键单击功能。...$(document).ready(function() { //catch the right-click context menu $(document).bind("contextmenu...).ready(function() { $('#loaded_max').val(50); }); 10、检测密码强度在表单功能中，经常会有检测用户输入的密码强度的功能，下面这个代码片段使用正则表达式来检测密码是否足够安全...PNG 问题至今，IE6 在国内仍然占据了大量的份额，因此在 Web 开发中仍然需要考虑 IE6 的兼容问题。...).ready(function(){ parseJson(); }); 14、隔行换色这是一个很老的功能了，在大的列表或表格中，隔行颜色可以大大提高内容的可读性。

1.4K3 0

26 个 jQuery使用技巧

预加载图片（Preloading images） $(document).ready(function() { jQuery.preloadImages = function() { for(var...延迟加载（jQuery timer callback functions） $(document).ready(function() { window.setTimeout(function()...使元素居中屏幕（Center an element on the screen） $(document).ready(function() { jQuery.fn.center = function...禁用jQuery动画（Disable jQuery animations） $(document).ready(function() { jQuery.fx.off = true; }); 26...防止不兼容冲突（No conflict-mode） $(document).ready(function() { var $jq = jQuery.noConflict(); $jq('#id

7012 0

【博客同步】onload与ready对比

类函数 : JS的 window.onload 方法， jQuery 的 (document).ready 方法和 (window).load 方法 ready 事件的触发，表示文档结构已经加载完成（...).ready 方法发生在DOM树构造完成（在onload之前发生），不必等图片等资源加载完 $(document).ready(function(){ alert("jquery ready...).ready(function(){ alert("jquery ready event1"); }) $(document).ready(function(){ alert("jquery...简化写法 window.onload 没有简化写法 (document).ready(function(){}) 可以简写成 (function(){}); 3 原生JS实现 jQuery 的 ready...){ //IE浏览器 document.attachEvent('onreadystatechange',function(){

3710 0

根据IE版本加载不同CSS样式的方法小结，解决低版本IE兼容问题

自从中国联盟成员导航采用响应式布局之后，不少朋友反馈该页面在 IE8、IE7 浏览器会错排，经测试发现确实存在这个问题，但我一直也没去深究解决。...搜来搜去，网上给出大约有三种简单可行的方法：一、最简单的方法就是在页面引入 css3-mediaqueries.js 插件解决兼容性问题；经测试，发现此方法 IE8 是可以了，但是 IE7 还是有点局部问题...，定位太麻烦，我也就没深究了！...("MSIE 7.0")>0){ //判断是否是IE7 document.getElementById("htcss").href="ForIE7.css"; //根据ID改变style...} }; }); 原理很简单，使用 js 判断 IE 及 IE 版本，然后根据不同版本来改变当前 css 样式表的 href，由于使用了 jQuery ready 预加载方法，所以需要在代码之前引入

3.1K8 0

点击加载更多

前端知识普及之页面加载

jquery $(document).ready()与window.onload的区别

01-老马jQuery教程-jQuery入口函数及选择器

onload 和 domready

一、初识jQuery

项目中遇到的bug（web前端-持续更新）

配合JQuery练习

jQuery来源学习笔记：扩展的实用功能

01-老马jQuery教程-jQuery入口函数及选择器

javascript-继承之jquery

jQuery原理（入口函数）

基于Web的商城后台管理系统的设计与实现

JQuery 动画：为页面添彩的魔法

【Java 进阶篇】JQuery 动画：为页面添彩的魔法

【前端】：async、defer、onload、DOMContentLoaded

JQuery 遍历：发现元素的魔法之旅

16个超实用的jQuery技巧攻略

26 个 jQuery使用技巧

【博客同步】onload与ready对比

根据IE版本加载不同CSS样式的方法小结，解决低版本IE兼容问题

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐