Question

我有一个脚本可以在画布上绘制带有图像的QR码。

它正在使用插件，通常情况下 - 一切都很好 - 但不是镀铬。

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"并在脚本触发后将div更改为style="width:100px;height:100px;" jQuery("#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

但是铬似乎比我更持久......

我要么完全错误地实现解决方案（非常可能），要么我对JS不熟悉，我首先不了解问题。

使用插件的脚本似乎无关紧要，因为插件在所有浏览器上运行良好（有时也是chrome ...）

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

Answer 1

当DOM完全加载时，

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

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

同样看起来document永远不会触发load事件，$(document).onLoad()不存在。

JS - Canvas图像在chrome中运行不正常（或者如何等待图像正确加载）

1 个答案: