由于忽略jQuery的文档载入和window载入的区别引发的bug-优快云博客

在使用jQuery制作鼠标移入导航栏下划线动画时，遇到了Chrome浏览器中下划线图片宽度异常变化的问题。初步判断这与文档和图片的加载顺序有关，导致元素宽度获取不准确。将$(function(){}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　前几天给学校的的某个部门做了个静态页面，里面我用jQuery写了个鼠标移入就会有个下划线移动到导航下的小动画，结果调试时出现了十分 "灵异" 的问题，在chrome(360极速浏览器)中作为下划线的图片的宽度时变得异常之大，而且还每次刷新时不一样，有时刷新一下好了，不过跟多时候的宽度都是异常之大，而且还和页面上的任何一个元素的宽度不一样。。

我对于js也是半桶水，对于JavaScript的 "灵异事件"也是见怪不怪了，忽然想到了一种可能，会不会和文档载入有关呢？

仔细一想，真的有可能啊~因为$(function(){ //...... })代表的是文档载入，记得当初看的某视频教程老师说的是只是文档载入而图片没有载入时开始执行js函数，因此jQuery的这个函数比window.onload要快一些，而我恰好用了jQuery来给这个元素初始化宽度样式，所以当时图片的宽度可能取到的就是某个空div的宽度，有时刷新就取到了，有时刷新人品不好就没有取到了。。因此这种具有一定随机性的jQuery 的bug就可以考虑一下是不是因为这个原因，也许把$(function(){ //....... })[相当于$(document).ready(function(){　　//........　　})] 换成$(window).load(function(){　　//........　　})就可以了。。本来想贴一下代码，不过刚才把那段代码提取出来又试了一下，结果bug无法复现了，对于js 的这些 "灵异问题" 我一直都不是很愿意深究的。。所以就没有贴出代码来了。。实在不好意思。。。不过还是希望对于遇到类似问题的朋友能提供一种可能的解决方法。

转载于:https://www.cnblogs.com/Mr-Nobody/archive/2013/03/18/2966916.html