Question

我正在尝试使用以下代码检查是否所有图像都已加载到容器中

$(document).ready(function () {
    $(".slide img").each(function (index) {
        var fakeSrc = $(this).attr('src');
        $("<img/>").attr("src", fakeSrc).css('display', 'none').load(function () {
            alert('loaded');
        }).
        error(function () {
            load_img_Single(fakeSrc);
        });
    });
    function load_img_Single(img) {
        alert(img);
        var ruth;
        $("<img/>").attr("src", img).css('display', 'none').load(function () {
            ruth = 'yeap';
        }).error(function () {
            ruth = 'nope';
        });
        alert(ruth);
    }
});

现在，你可以看到我使用假容器加载图像并检查它是否已被加载。

我在第一次检查图像时使用.error来查看它是否正确加载，如果没有，它会执行我的函数load_img_Single（image）函数再次加载它。

现在再次在该函数中检查它是否已加载。但问题是变量'ruth'没有被设置为该函数内的任何东西。它被宣布在外面，但仍然以“未定义”的形式出现。

任何见解都会受到赞赏。

Answer 1

原因是加载图像是异步的。当你打电话：

$("<img/>").attr("src", img).css('display', 'none').load(function() {
        ruth = 'yeap';
    }).error(function() { ruth = 'nope'; });

load或error尚未发射。这就是为什么{<1}}在您之后立即调用ruth

时未定义的原因

jquery图像加载检查错误

1 个答案: