Question

我一直在寻找解决方案，但我得到的只是$（window）.on（“load”，fuction（）{}）只是加载html资源。我正在创建一个可变数量的图像，并在加载窗口后使用每个（）函数将它们插入到带有jquery的div中。

$.each(footeradds, function(fad){
    $("<div class=\"footerads\"><img src=\"image" + fad + ".jpg\"/></div>").appendTo(".footer");
});

我需要计算这些图像的容器宽度，这取决于图像的数量和宽度，它们只有在加载后才有。

如果我这样做

$(".footer img").on("load", function() {})

每次加载图像时都会调用该函数，并且在加载所有图像后只需要调用一次该函数。

我的问题是：如何在加载使用jquery创建的图像后调用函数？

Answer 1

没有方法，但你可以做一件事

获取变量A =计算所有图像，然后创建其他变量B = 1并在每个图像加载时增加它检查条件A == B

当最后一张图像被调用时，该条件为真........

Answer 2

第一次关闭事件

$(".footer img").on("load", function() {
    $( this ).off( event );
})

Answer 3

您可以为每个图片使用延迟，并$.when检查所有图像是否已解决等等

var p = $.map(footeradds, function(fad){

    var def = new $.Deferred,
        div = $('<div />', {
            'class' : 'footerads'
        }),
        img = $('<img />', {
            on  : {
                load : function() {
                  def.resolve(this);
              }
            },
            src : 'image' + fad + '.jpg'
        });

    $(".footer").append( div.append(img) );

    return def.promise();
});

$.when.apply($, p).then(function(images) {
    // all images loaded
    var images = [].slice.call(arguments);
    // use images here
});

Answer 4

所以我最终使用了Pratik Bhalodiya的想法并做了这个：

var footerW = 0;
var fimgs = 0;
$(".footer img").on('load', function() {
    footerW += + $(this).width();
    fimgs++;
    if (fimgs == $(".footerads").length){
        //do stuff here
    }
});

感谢大家的帮助！

只有在加载了JQuery创建的图像之后才调用一次函数

4 个答案: