首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery:$(document).ready()在IE中太慢了

在 Internet Explorer (IE) 中,$(document).ready() 的确可能导致性能问题。这是因为 IE 浏览器在解析 DOM 时,会在文档尚未完全加载时触发 readyStateinteractive 的事件,从而导致 $(document).ready() 提前执行。这种情况下,可以使用以下方法来优化性能:

  1. 使用 window.onload 事件替代 $(document).ready()window.onload 事件会在整个页面(包括所有资源,如图片和样式表)加载完成后触发,因此可以确保在执行相关操作时,页面上的所有元素都已经准备好。
代码语言:javascript
复制
window.onload = function() {
  // 你的代码
};
  1. 使用渐进式增强和优雅降级策略。这种策略意味着你首先为所有浏览器提供一个基本的功能,然后根据浏览器支持的特性逐步增强功能。这样一来,即使 IE 中的 $(document).ready() 速度较慢,也能确保用户在等待时获得基本功能。
  2. 考虑使用其他库或工具,如使用 Vanilla JavaScript 替代 jQuery,或使用如 FastClick 这样的库来提高移动端页面的响应速度。

总之,要解决 IE 中 $(document).ready() 速度慢的问题,可以尝试使用 window.onload 事件,结合渐进式增强和优雅降级策略,以提高页面性能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端知识普及之页面加载

接下来我们要做的最后一件事,就是看看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.6K90
  • 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

    2.5K100

    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 事件 下面代码可以发现 jQueryready 事件稍微早于 DOMContentLoaded 事件,但都是实现了...准备完毕,资源还没加载完"); }, false); // jQuery 的 domready $(document).ready(function(){ alert("jQuery 的 DOM

    2.7K20

    一、初识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的四种写法,推荐使用第三种写法。

    52520

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

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

    2.4K00

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

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

    29210

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

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

    26360

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

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

    19411

    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、隔行换色 这是一个很老的功能了,大的列表或表格,隔行颜色可以大大提高内容的可读性。

    1K30

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

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

    2.5K80

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券