Javascript 预加载图像-JQuery

我正在使用一个动能层将图像加载到画布中。我遇到的问题是，当单击打印按钮时，它会从另一个文件中获取图像，并将其显示在要打印的白色页面上。第一个图像将始终加载，但第二个图像将不会加载，直到我关闭打印并再次单击它

我记录了图像源，注意到第一个图像已经加载以供使用，但第二个图像尚未加载以供使用。这意味着我可以在chrome开发者工具中预览图像，但第二张图像我无法预览。我只能将其加载到新选项卡中。但是当关闭打印部分并重新打开它时，我现在可以预览两幅图像，这使我得出结论，第二幅图像尚未绘制出来，在调用Kinetic.Layer时使用。所以我的问题是，如何将图像预加载到位

这是我的动力学代码：

请注意，对于我加载到打印部分的每个图像，都将调用此displayFloor\u打印

建议或想法？

在查看了一些预加载问题后，我发现：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

从另一个问题：

这样做的目的是将图像插入到DOM中，使浏览器意识到图像的存在，并正确缓存图像。否则，图像只存在于仅适用于单页应用程序的内存中

希望这对其他人有帮助

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}