jQuery 加载函数的回调答案

【问题标题】：Callback of a load function jQueryjQuery 加载函数的回调
【发布时间】：2011-03-24 16:23:38
【问题描述】：

我希望能够在创建元素（图像元素）时回调 .load() 函数。该代码通过以下代码加载新的图像元素来工作：

$('<img />').load(function()
{
    var img = this;
    $('.block-wrap img').fadeOut('slow', function()
    {
        $(this).replaceWith(img);
    });
}).attr('src', loadurl);

但我希望在图像加载和替换后能够继续。这就是我需要它的工作方式：

$('<img />').load(function()
{
    var img = this;
    $('.block-wrap img').fadeOut('slow', function()
    {
        $(this).replaceWith(img);
    });
}).attr('src', loadurl);

$('.block-wrap input.imageheight').val($('.block-wrap img').height());
$('.block-wrap input.imagewidth').val($('.block-wrap img').width());

它返回第一个图像高度（不是已被替换的图像，它是加载微调器图像），因此我需要它能够在图像完全加载到 DOM 时检索图像的高度和宽度。太糟糕了.replaceWith() 没有回调方法，但我不能在.load() 上使用回调函数，因为它是通过.load() 函数传递的函数，所以它不起作用。

【问题讨论】：

标签： jquery callback load jquery-callback

【解决方案1】：

我对此不是 100% 的，但你能不能在 replaceWith 的末尾添加一个加载事件？即：

$(this).replaceWith(img).load(function(){ $('.block-wrap input.imageheight').val($('.block-wrap img').height()); $('.block-wrap input.imagewidth').val($('.block-wrap img').width()); });

【讨论】：

嗯。这是合理的，它总是为每个值返回 0，所以我用 100 毫秒的 setTimeout() 包装它们，它返回了图像尺寸。仍然不确定是否有比这更好的解决方案。

【解决方案2】：

它返回了错误的图像尺寸，因为 $('.block-wrap img').height() 和 $('.block-wrap img').width() 被调用之前 .load() 完成。

您可以将这两行放在load 回调中（在.replaceWith 之后），以便它们引用正确的图像。

$('<img />').load(function()
{
    var img = this;
    $('.block-wrap img').fadeOut('slow', function()
    {
        $(this).replaceWith(img);
        $('.block-wrap input.imageheight').val($('.block-wrap img').height());
        $('.block-wrap input.imagewidth').val($('.block-wrap img').width());
    });
}).attr('src', loadurl);

【讨论】：