Question

我希望能够在创建元素时对.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()函数传递了

Answer 1

我不是百分之百，但你不能在replaceWith的末尾添加一个加载事件吗？ I.E：

$(this).replaceWith(img).load(function(){

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

});

Answer 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);

回调加载函数jQuery

2 个答案: