调用一次函数，仅在加载 JQuery 创建的图像后答案

【问题标题】：Invoke function once, only after JQuery created images are loaded调用一次函数，仅在加载 JQuery 创建的图像后
【发布时间】：2017-02-06 04:36:03
【问题描述】：

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

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

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

如果我这样做了

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

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

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

【问题讨论】：

$(".footer img").one("load", function() {})
@Rayon 这将为第一个加载的图像调用，OP 希望在加载所有图像后执行回调。

标签： javascript jquery html

【解决方案1】：

您可以为每张图片使用 deferred，并 $.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
});

【讨论】：

一般src是在load处理程序之后设置的（可能是为了避免cached-image场景），是否也适用于jQuery( html, attributes )？
由于某种原因我不能使用全局数组
@Rayon - 不确定它在 jQuery 中是否重要，但交换它们并没有什么坏处。
@SuzanneEdelmanCreoconcept - “全局数组”到底是什么意思？
@adeneo 我的意思是该数组是以我应该能够在此函数中使用它的方式创建的。它是在其他一切之前创建的。就像变量是全局的一样。

【解决方案2】：

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

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

感谢大家的帮助！

【讨论】：

【解决方案3】：

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

取一个变量 A = count all images ，然后创建另一个变量 B = 1 并在每次加载图像时递增它检查条件A == B

当调用最后一张图片时，该条件为真.....:)

【讨论】：

【解决方案4】：

第一次后关闭活动

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

【讨论】：

这样当第一张图片被加载时它就会被调用。其他人呢？我需要在函数发生之前加载所有这些。