Javascript JS-画布图像在chrome中无法正常工作（或者如何等待图像正确加载）

我有一个脚本，可以在画布上绘制带有图像的二维码

它使用的是一个插件，通常情况下——一切都很好——但不是在chrome中

HTML

如前所述，它在所有经过测试的浏览器上都工作得很好——除了在chrome上——它偶尔工作。失败多于工作。（90%-10%）

稍加观察，我注意到两件事：

1.

jQuery（document）.ready（function（）

在我理解它应该做什么（当然，我的理解可能是错误的）时并没有真正起作用，因为脚本在加载文档之前启动并显示图像

2-我假设通过观察脚本失败，因为（与1相关）-当脚本启动时，实际上找不到图像-因此它没有任何地方可以获取源

开始时，我将责任归咎于

“display:none”

，并将div改为

style=“width:100px；height:100px；”“

，在脚本触发后使用

jQuery（#o99 qrs img buffer”）.hide（）

不好

然后我尝试将

jQuery（document.ready

更改为

load

和

onLoad

还是不行

在这里阅读了大量关于SE的相关问题，我发现了3个关于我的问题的提示：，和

因此，我尝试实施第一个方案，它看起来像一个坚实的解决方案：

var imagetest = new Image();

imagetest.onload = function() { 
    // wrap the firing in a function only when the image loads
    jQuery("#o99_qrcode").empty().qrcode(options);
};
imagetest.src: jQuery("#o99-qrs-img-buffer")[0]; // taken as example

但是chrome看起来比我更持久

要么我实现的解决方案完全错误（很可能），要么我对JS非常不熟悉，以至于我一开始就不理解这个问题

使用插件的脚本似乎无关紧要，因为插件在所有浏览器上都能很好地工作（有时也能在chrome上工作）

无论如何，我需要帮助找到加载图像的方法，并确保在DOM完全加载时，在脚本启动之前加载图像…

启动。实际上，这种情况发生在解析器刚刚遇到

时。这并不意味着页面已经准备好/完全加载，外部资源的内容如e

iframe

s或

img

可能仍在加载。

$（document）.ready（）

仅保证您可以引用HTML中的所有元素

如果要等到整个页面及其所有资源都已完全加载，则需要使用

---

另外，看起来

document

从不触发

load

事件，

$（document）。onLoad（）

不存在。

$（document）。在解析页面的
正文
时，会触发ready（）

。其他资源，如

iframe

和

img

的内容可能仍在加载。使用

$（窗口）.load（）

，在整个页面准备就绪且所有资源都已完全加载后激发。您是否可以使用chrome开发人员工具，并在输出意外时检查控制台中是否有任何错误。@uditbansal-当然，我使用了chrome中的devtools（和FF..）但控制台中显然没有错误。@Teemu-Genius！它现在似乎可以工作了。我不确定这是否来自缓存（已清理），但现在它似乎还可以。但有一个问题。我应该将整个

选项
变量包装在
$（窗口）中。加载
还是只分离实际触发？还有-为什么
$（文档）.load
和
$（document）。onLoad
失败？看起来
document
从未触发
load
事件，
$（document）。onLoad（）不存在。关于包装，我不知道，请使用最适合您的代码。
 jQuery(document).ready(function() {

    var options = {
        render: "'.$qr_render.'", // Canvas, Div ,Image 
        size: '.$qr_size.',
        radius: '.  ($qr_corner_r * 0.1) .',

        .... tons of other options....

        // Image Label -> the problem is here 
        image: jQuery("#o99-qrs-img-buffer")[0], // taken as example
    };

    jQuery("#o99_qrcode").empty().qrcode(options);
});

var imagetest = new Image();

imagetest.onload = function() { 
    // wrap the firing in a function only when the image loads
    jQuery("#o99_qrcode").empty().qrcode(options);
};
imagetest.src: jQuery("#o99-qrs-img-buffer")[0]; // taken as example