jquery图像加载检查错误

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 尚未触发。这就是为什么 ruth 在之后调用 alert(ruth); 时未定义的原因