javascript - js加载完图片后，把图片资源放在变量里后，再读出来的却发现没放进去，代码谁能看看
本文介绍了javascript - js加载完图片后，把图片资源放在变量里后，再读出来的却发现没放进去，代码谁能看看的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<style rel="stylesheet" type="text/css">
*{margin:0; padding:0;}
html, body{height:100%;font-size:10px;background:#000;}
#main{background:none;display:block;margin:0 auto;cursor:url(images/cur/hit_move.cur) , auto;}
.button{position:absolute;left:0;top:0;color:#fff;z-index:1000;}
button{display:block;font:1.6rem '微软雅黑'}
#loaddiv{position:absolute;left:0;top:0;width:100%;height:100%;background:radial-gradient(circle at 50%, #285A7B,#222);z-index:999;}
#loadmax{position:absolute;left:0;right:0;margin:0 auto;bottom:10rem;width:70%;height:2rem;border:1px #222 solid;box-shadow:1px 1px 1px #ccc inset,-1px 0 1px #ccc inset;border-radius:2rem;background: linear-gradient(180deg,#666,#aaa);}
#loaded{width:10%;height:100%;box-shadow:0 0 0.5rem #03979e,0 1px 1px #fff inset,-1px -1px 1px #333 inset;border-radius:2rem;text-align:right;font:bold 1.4rem/2rem 'Tahoma';color:#fff;text-shadow:1px 1px #666 inset;background: linear-gradient(180deg,#146794,#013c5a);}
</style>
</head>
<body onselectstart="return false">
<div class="button"><div id="s"></div><div id="fps"></div><button onclick="screenShot()">截图</button></div>
<div id="loaddiv"><div id="loadmax"><p id="loaded">10% </p></div>
</div>
<div id="main">
</div>
</body>
<script type="text/javascript">
function $(ele){
return document.getElementById(ele);
}
var tmap = {
"source" : {
"urls" : [
"images/player/build1.png",
"images/player/map1.png",
"images/player/player1.png",
"audio/objectaudio/11.mp3"
],
"loaded_source":[],
"timer" : null,
"loaded_num":0
}
}
var source_url_len = tmap.source.urls.length;
function load_source(){//加载游戏或地图所需要的所有素材，返回进度
for (var i=0 ; i<source_url_len;i++ ){
var index = tmap.source.urls[i] .lastIndexOf(".");
var type = tmap.source.urls[i] .substring(index + 1, tmap.source.urls[i] .length);
if(type=='png'){
var img = document.createElement('img');
img.onload = function() {
if(img.complete){
tmap.source.loaded_source[i] = img;
console.log(tmap.source.loaded_source[i]);
tmap.source.loaded_num+=1;
}
}
img.src = tmap.source.urls[i];
}else if(type!="png"){
var audio = new Audio(tmap.source.urls[i]);
audio.onloadedmetadata = function() {
tmap.source.loaded_num+=1;
tmap.source.loaded_source[i] = audio
}
}
}
}
load_source();
function loadcalc(ing,max){
var calc = (ing/max).toFixed(4)*100;
$('loaded').innerHTML = calc+'% ';
$('loaded').style.width = calc+'%';
}
tmap.source.timer = setInterval(function(){
if(tmap.source.loaded_num == source_url_len){
console.log(tmap.source.loaded_source[0]);
loadcalc(tmap.source.loaded_num,source_url_len);
//clearInterval(tmap.source.timer);
canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 400;
canvas.id="canvas";
canvas.style.cssText = 'display:block;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;z-index:99999';
$('main').appendChild(canvas);
ctx = canvas.getContext('2d');
ctx.drawImage(tmap.source.loaded_source[0],0,0);
}else{
loadcalc(tmap.source.loaded_num,source_url_len);
console.log(tmap.source.loaded_source[0]);
}
},1000
);
</script>
</html>
console.log(tmap.source.loaded_source[i]);
换成
console.log(tmap.source.loaded_source[0]);
第一个结果显示image对象
为什么第二个显示undefined
还有为什么ctx.drawImage(tmap.source.loaded_source[0],0,0);画不出来？并且报错？
我代码自己觉得没问题呀
图片和音频你可以自己随便找点，谢谢
解决方案
先考考你一个问题:
var fnArr = [];
for( var i = 0; i < 10; ++i ) {
fnArr.push(function(){
console.log( i )
});
}
fnArr.forEach(function(fn){
fn();
});
说说会输出什么. 如果你能明白的话, 你也就会明白你写的这个循环问题在哪了.
for (var i=0 ; i<source_url_len;i++ ){
var index = tmap.source.urls[i] .lastIndexOf(".");
var type = tmap.source.urls[i] .substring(index + 1, tmap.source.urls[i] .length);
if(type=='png'){
var img = document.createElement('img');
img.onload = function() {
if(img.complete){
tmap.source.loaded_source[i] = img;
console.log(tmap.source.loaded_source[i]);
tmap.source.loaded_num+=1;
}
}这篇关于javascript - js加载完图片后，把图片资源放在变量里后，再读出来的却发现没放进去，代码谁能看看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
