Javascript jquery图像加载检查错误

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

$(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);
    }
});

$（文档）.ready（函数（）{
$（“.slide img”）。每个（函数（索引）{
var fakeSrc=$（this.attr（'src'）；
$（“”）.attr（“src”，img）.css（'display'，'none'）.load（函数（）{
露丝=‘是的’；
}).错误（函数（）{
露丝=‘不’；
});
警惕（露丝）；
}
});

现在你可以看到im使用一个假容器来加载图像，并检查它是否已加载

我在第一次检查图像时使用了.error来查看它是否被正确加载，如果没有，它将执行我的函数load\u img\u Single（image）函数来再次加载它

现在，在该函数中，我再次检查它是否已加载。但问题是变量“ruth”没有设置为该函数中的任何内容。它已在外部声明，但仍然是“未定义”的

---

如果您有任何见解，我们将不胜感激。

原因是加载映像是异步的。当您调用：

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

$（“
加载
或
错误
尚未触发。这就是为什么调用
警报（ruth）时，
ruth
未定义的原因
加载图像之后，加载图像是异步的，它不会阻止浏览器，因此代码会继续执行，并且在加载图像后会调用回调函数，当您检查变量时，回调函数还没有执行。@user1690718:因为浏览器是单线程的。在浏览中不建议执行同步操作你应该把你的代码放进去callback@user1690718.load（callback），事实上。on（'load'，callback）是一个事件，事件不能是“sync”，这是没有意义的，因为事件被触发时会对发生的事情做出反应。在这里，一旦图像被加载。您可以手动触发事件（处理程序）但这不是你想要的here@user1690718：解决方法总是不好，也不推荐。异步是浏览器的本质，我们不应该违背它。如果您仍然需要解决方法，您可以查看一些讨论，例如预加载图像，