0

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

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

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

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

那我该如何解决我的问题呢？

4

3 回答 3

2

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

var fin = 0;

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

$('#mydiv img').load(function ()
{
    fin++;
    if(fin == $('#mydiv img').length){
       $('#mydiv').animate({
           'width' : data.width, 
           'height' : data.height
       },800);    
       $('#loading').remove();
    }
});
于 2013-04-02T23:59:44.967 回答
1

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

布兰科

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();
        }
    }
});
于 2013-04-02T23:31:50.097 回答
1

下面的代码将为每个加载的图像添加一个属性“数据加载”。然后它将检查加载的图像数量是否等于 #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();
    }
});
于 2013-04-03T00:00:09.843 回答