javascript - Javascript Canvas 图像并不总是加载
问题描述
有时我的图像在我第一次访问页面时加载,而其他时候我必须刷新它们才能加载。有时也会加载一个图像,而不是另一个。
//Store everything in arrays
var dimgs = ["hair-1", "head-1"]; //Name of classes for imgs
var cans = ["hairimg", "headimg"]; //Canvas element names
var dcans = ["chairimg", "cheadimg"]; //Canvas names
var dctxs = ["ctxa", "ctxb"]; //Context names
var defimgs = []; //Images found
//Loop to create Canvas and draw image
for (var p = 0; p < 2; p++) {
if(p != null) {
getcan(p);
}
}
//Function to create Canvas and draw image
function getcan(p) {
defimgs[p] = document.getElementsByClassName(dimgs[p])[0].getElementsByTagName('img')[0];
var x;
if(p != null) {
defimgs[p].onload = (function(x){
dcans[x] = document.getElementById(cans[x]);
dctxs[x] = dcans[x].getContext('2d');
dcans[x].width = defimgs[x].naturalWidth;
dcans[x].height = defimgs[x].naturalHeight;
dctxs[x].drawImage(defimgs[x], 0, 0);
}(p));
}
}
我还尝试了以下相同的结果:
//Store everything in arrays
var dimgs = ["hair-1", "head-1"]; //Name of classes for imgs
var cans = ["hairimg", "headimg"]; //Canvas element names
var dcans = ["chairimg", "cheadimg"]; //Canvas names
var dctxs = ["ctxa", "ctxb"]; //Context names
var defimgs = []; //Images found
//Loop to create Canvas and draw image
for (var p = 0; p < 2; p++) {
if(p != null) {
defimgs[p] = document.getElementsByClassName(dimgs[p])[0].getElementsByTagName('img')[0];
dcans[p] = document.getElementById(cans[p]);
dctxs[p] = dcans[p].getContext('2d');
dcans[p].width = defimgs[p].naturalWidth;
dcans[p].height = defimgs[p].naturalHeight;
getcan(p);
}
}
//Function to draw image
function getcan(p) {
var x;
if(p != null) {
defimgs[p].onload = (function(x){
dctxs[x].drawImage(defimgs[x], 0, 0);
}(p));
}
}
HTML:
<div>
<canvas id="hairimg" style="border: 1px solid #000;"></canvas>
</div>
<div>
<canvas id="headimg" style="border: 1px solid #000;"></canvas>
</div>
<div class="hair-1"">
<img src="hair.png" alt="User Image">
</div>
<div class="head-1"">
<img src="head.png" alt="User Image">
</div>
我只是不知道使用该类将div
标签中的多个图像加载到.div
canvas
解决方案
您可能需要考虑使用 window.onload。此回调仅在页面上的所有图像完成加载后才会触发,因此此时处理您的图像可能会更成功。这是一个包含更多信息的堆栈溢出帖子,以及window.onload 的文档。
你会像这样构造它:
window.onload = function() {
dimgs.forEach(function(img) {
getcan(img);
});
}
推荐阅读
- java - 无法创建新服务:通过 SSH 启动 GRID 时的 ChromeDriverService,但直接在主机上创建 GRID 时工作正常
- mysql - mysql-触发更新列
- javascript - eslint 规则强制在块的顶部声明变量?
- google-bigquery - 尝试将 Google Big Query 中的输出字段转换为日期
- django - 如何在 Django 模型中获取 upload_to 的当前日期
- bash - 如何在我的 .inputrc 中为 readline 使用 option-delete
- c++ - 如何将 std::array 实例地址作为参数传递给 std::min_element?
- python - 构建字典,其值为单词的平均长度
- erlang - 在 erlang 中使用列表理解增加列表大小
- python - Merging results from Prediction to Original Data frame?