javascript - JS - Canvas Image 在 Chrome 中无法正常工作(或如何等待图像正确加载)

Question

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

它使用插件，通常 - 一切都很好 - 但在 chrome 中不行。

HTML

<img id="#o99-qrs-img-buffer" src="http://localhost/www.beta.com/logo1.png" 
    style="display:none">
<div id="o99_qrcode" class="code"></div>

JS 脚本如下(忽略 PHP 部分 - 它运行良好):

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

正如所说，它在所有经过测试的浏览器上都工作得很好 - 除了 Chrome - 它偶尔可以工作。失败多于工作。 ( 90% - 10% )

观察了一下，我注意到两件事:

1 - jQuery(document).ready(function() 并没有真正按照我对它应该做什么的理解工作(当然我的理解可能是错误的)，因为脚本在文档加载完成之前触发并显示图像。

2 - 我认为通过观察脚本失败是因为(与 1 相关) - 当脚本触发时实际上无处可找到图像 - 因此它无处可获取源代码..

一开始，我责怪 "display:none" 并使用 jQuery 将 div 更改为 style="width:100px;height:100px;" ("#o99-qrs-img-buffer").hide(); 脚本触发后。

不好。

然后我尝试将 jQuery(document).ready 更改为 load 和 onLoad。

还是不行。

在 SE 上阅读了很多相关问题 - 我发现 3 个问题暗示了我的问题:HERE , HERE和 HERE 。

所以我尝试实现第一个，它看起来是一个可靠的解决方案:

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 也可以..)

无论如何，我需要帮助找到加载图像的方法并确保在脚本触发之前加载它......

Answer 1

$(document).ready() 当 DOM 完全加载时被触发。实际上，这发生在解析器刚刚遇到</body>时。 。这并不意味着页面已准备好/完全加载，外部资源的内容如 iframe或img可能仍在加载。 $(document).ready()仅保证您可以引用 HTML 中的所有元素。

如果你想等到整个页面及其所有资源都已完全加载，则需要使用 $(window).load() .

看起来也像document从不触发load事件，$(document).onLoad()不存在。