Opera 有时会忽略 jquery 功能，直到用户与页面交互之后答案

【问题标题】：Opera sometimes ignoring jquery function until after user interaction with pageOpera 有时会忽略 jquery 功能，直到用户与页面交互之后
【发布时间】：2013-02-17 02:51:54
【问题描述】：

我在歌剧中遇到了一个非常奇怪的错误。检查以下代码：

$(document).ready(function(){
    var $imgHeight = $('.collection-item-image').width() / 3 * 4;
    $('.collection-item-holder').css('padding-top',$imgHeight + 'px');

    $(window).resize(function(){
        var $imgHeight = $('.collection-item-image').width() / 3 * 4;
        $('.collection-item-holder').css('padding-top',$imgHeight + 'px');
    });
});

有时，Opera 会忽略在文档就绪时运行的代码。每个其他浏览器都可以正常运行。我以为它可能完全忽略了准备好的文档，但是我用警报功能对其进行了测试，发现它每次都有效。似乎虽然它有时会在正常的文档就绪条件下忽略它，但如果我在函数运行之前添加一个警报，在警报框中按“确定”后，代码每次都运行良好。出于某种原因，有时用户必须与页面交互才能运行。

有谁知道为什么或更好的方法来解决或解决此问题？请记住，只有在以这种方式设置 CSS 时才会发生这种情况，并且在调整窗口大小时，代码会完美执行并按应有的方式显示。

【问题讨论】：

其他所有浏览器都可以正常运行。 我正在尝试理解您的问题。预期的结果是什么？ $imgHeight 在 Opera 中的计算是否错误？
要么忽略高度，要么尝试运行函数太快，要么计算错误高度。无论哪一个，$imgHeight 要么不正确，要么由于某种原因没有正确设置。

标签： jquery css opera

【解决方案1】：

不确定是什么导致了这个问题，但是将函数包装在 window.load() 中已经解决了这个问题。

【讨论】：

【解决方案2】：

根据documentation： “传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他 jQuery 代码的最佳位置。当使用依赖于 CSS 样式值的脚本时属性，请务必在引用脚本之前引用外部样式表或嵌入样式元素。”

换句话说，这是在页面的结构准备好之后运行的，而不是在整个页面（图像、外部链接）加载时运行。既然你说它有时可以工作，所以这可能是一个竞争条件，当图像加载速度非常快或从缓存中加载时，它可能在 DOM 准备好时准备好事件触发。在您的情况下，当页面上的所有媒体已加载时，onload 是适当的事件。

【讨论】：