在 jQuery 函数中调用 JavaScript 函数？答案

【问题标题】：Calling JavaScript Functions inside of jQuery Functions?在 jQuery 函数中调用 JavaScript 函数？
【发布时间】：2011-12-18 13:53:57
【问题描述】：

我有两个想要从 jQuery 函数内部调用的 JavaScript 函数。因为我是动态加载图像的，所以我想通过调用两个函数func1() 和func2() 来检查每个图像的宽度，这两个函数将检查宽度。

If width < 20px then double width

我不想等待图像完全加载然后进行检查。

我试过了，但没用

$(document).ready(function ()
{
    $('img').each(function()
    {
       ....
    })

    func1();
    func2();
})

function func1()
{
   ....
}

function func2()
{
   ....
}

我错过了什么？

【问题讨论】：

ready/each 调用后的分号。浏览器错误控制台显示什么？
一旦 DOM 准备好，此代码将调用 func1() 和 func2()。你想做什么？
$('body').each 有点奇怪——你只有一个身体。
你确定你已经包含了 jQuery 吗？它有效：jsfiddle.net/37YKR
@tvanfosson 错误控制台什么也不显示。

标签： javascript jquery function call

【解决方案1】：

除非 img 标签具有指定的宽度，否则您将无法在完全加载之前正确获取宽度。浏览器在拥有整个图像之前无法知道尺寸是多少。

这是一种等待图像加载完毕的方法：

Official way to ask jQuery wait for all images to load before executing something

【讨论】：

【解决方案2】：

我遇到了与您的问题类似的问题。我认为你必须将你的函数移动到 jquery 块中。

$(document).ready(function() {
    function1 () {
       ...       
    }
    function2 () {
       ... 
    }
});

否则，我认为不能从 jQuery 内部调用它们。测试它并告诉我结果。

【讨论】：

无需放入 jQuery 块中。始终建议将其放在文档就绪事件之外。否则函数仅在页面加载后评估。这将增加页面加载时间
谢谢查米卡。我会试试你说的。

【解决方案3】：

你可以改变这个：

$(document).ready(function ()

到这里：

$(window).load(function ()

确保所有图片都已加载。

另一种选择是将load 处理程序绑定到图像本身，但如果图像被缓存，可能会出现问题。

$('img').load(function() {
    func1();
    func2();
});

您应该注意，这将为每个图像调用一次函数，这可能意味着您需要更改函数的工作方式。就像让他们接收单个图像作为参数一样。

【讨论】：

:( 使用它与window.onload = messWH; 具有相同的效果，这不是我想要的。猜猜这就像epignosisx 所说的那样。但是，谢谢