Question

我正在使用JQuery动态加载图像。有些图像可能很大，除非所有图像都已完全加载，否则我不想显示任何图像。所以我有类似的东西：

$('#mydiv img').load(function ()
{
    $('#mydiv').animate(
    {
        'width' : data.width, 
        'height' : data.height
    },800);

    $('#loading').remove();
});

所以我虽然这意味着“当”mydiv“中的所有图像都被加载时，调整div的大小并删除”加载“项目”。但现在我认为它实际上意味着“当至少载入一张图像时......”。

然后我该如何解决我的问题？

Answer 1

您需要的是范围之外的变量，在图像完成加载时保持计数

var fin = 0;

然后在每个加载函数（）上递增。

$('#mydiv img').load(function ()
{
    fin++;
    if(fin == $('#mydiv img').length){
       $('#mydiv').animate({
           'width' : data.width, 
           'height' : data.height
       },800);    
       $('#loading').remove();
    }
});

Answer 2

这将驻留在触发事件中。例如，点击事件：

<强> Blanco的

var all_loaded = true;

$('#mydiv img').each(function() {
    $(this).error(function (){
        all_loaded = false;
    });
})

if (all_loaded) {
    $('#mydiv').animate({'width' : data.width, 'height' : data.height},800);
    $('#loading').remove();
}

点击活动

$('#myButton').click(function() {
    var all_loaded = true;

    $('#mydiv img').each(function() {
        $(this).error(function (){
            all_loaded = false;
        });
    })

    if (all_loaded) {
        $('#mydiv').animate({'width' : data.width, 'height' : data.height},800);
        $('#loading').remove();
    }
});

如果你真的希望代码等到你加载的所有图像（创建一个无限循环是危险的），你可以继续重新循环.each()直到all_loaded不再等于false。等;

while (all_loaded !== true) {
    var all_loaded = true;

    $('#mydiv img').each(function() {
        $(this).error(function (){
            all_loaded = false;
        });
    })

    if (all_loaded) {
        $('#mydiv').animate({'width' : data.width, 'height' : data.height},800);
        $('#loading').remove();
    }
}

更新版本

$('#myButton').click(function() {
    var all_loaded = false;

    while (all_loaded !== true) {
        var all_loaded = true;

        $('#mydiv img').each(function() {
            $(this).load().error(function (){
                all_loaded = false;
            });
        })

        if (all_loaded) {
            $('#mydiv').animate({'width' : data.width, 'height' : data.height},800);
            $('#loading').remove();
        }
    }
});

Answer 3

下面的代码将为每个加载的图像添加“数据加载”属性。然后它将检查加载图像的数量是否等于#mydiv中的图像数量，并仅在加载最后一个图像后执行动画：

$('#mydiv img').load(function ()
{
    $(this).attr('data-loaded', '');
    if ($('#mydiv img[data-loaded]').length == $('#mydiv img').length)
    {
        $('#mydiv').animate(
        {
            'width' : data.width, 
            'height' : data.height
        },800);

        $('#loading').remove();
    }
});

加载一组图像时触发事件

3 个答案: