Chrome中的JQuery窗口宽度不正确 [英] JQuery window width not correct in Chrome

问题描述

我已经创建了一个插件，我已经减少到插件的裸露骨骼（即没有功能，只是结构）来调试此问题，它仍然存在。它涉及调整div的大小并将其基于文档的宽度。

问题是文档报告的宽度与实际宽度相比减少了17px，因此不能正确确定div的大小。

我已经发出警报以查明问题发生的位置：
在ready函数之前：1780px（正确的宽度）
在就绪函数：1763px
插件内部：1763px
（从document.width和$（document）.width（）返回的所有值具有相同的结果）

这只发生在Chrome中，甚至在插件减少到无效的情况下仍然存在。

有什么想法为什么会发生这种情况？

jQuery文档：

当页面
被渲染时，JavaScript提供了用于执行代码的加载
事件，但直到所有资产（如
图像）都已完全接收，此事件才会触发
触发。
在大多数情况下，只要DOM层次结构完全构建完毕
，就可以运行脚本
。处理程序将
传递给.ready（），并保证在DOM准备就绪后执行
，因此
通常是
的最佳位置，并附加所有其他事件处理函数和
运行其他jQuery代码。当使用依赖CSS
样式属性值的
脚本时，在
引用脚本之前，重要的是
引用外部样式表或
嵌入样式元素。

在代码依赖加载的
资产的情况下（例如，如果需要图像的尺寸
），代码
应该放置在
加载事件的处理程序中。

您可能应该使用

  $（window）.load（function（）{}）; 
  

作为触发事件

I have created a plugin which i have cut down to the bare bones of a plugin (i.e. no functionality, just the structure) to debug this issue and it still exists. It deals with resizing divs and bases this on the document's width.

The problem is that the documents reported width is reduced by 17px from its actual width and thus doesnt size the divs correctly.

I have put in alerts to find out where the problem occurs: Before "ready" function: 1780px (correct width) Inside the "ready" function: 1763px Inside the Plugin: 1763px (all values returned from "document.width" and "$(document).width()" with same results)

This is only happening within Chrome and still remains even with the plugin reduced to effectively nothing.

Any thoughts on why this is happening?

解决方案

taken from jQuery documentation:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

you probably should be using

$(window).load(function() {});

as trigger event

这篇关于Chrome中的JQuery窗口宽度不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！