Question

目前我正在制作另一个html5 / javascript广告。这个使用来自cookie的多个数据。为了正确渲染所有内容，我创建了一个获取信息的for循环，然后将其发送到另一个函数。

我的问题是它第一次加载得太快，所以它会跳过图像。每次我必须在广告正确显示之前刷新广告。到目前为止我使用的所有onload函数都失败了（发送错误的数据，什么都没有，或者只有1个）。

以下是该项目的相关部分：

for (var i=0; i < 3; i++){
   pT.push("pT"+[i]);
   pM.push("pM"+[i]);
   ctx.push("ctxP"+[i]);
   cvs.push("cvsP"+[i]);

   cvs[i] = document.getElementById('canvas'+[i]);
   ctx[i] = cvs[i].getContext('2d');

   pT[i] =  new Image();
   pT[i].onload = function(){
       console.log("pT: "+ this.height);
   }
   pT[i].src = data.products[i].imageUrl;

   pM[i] =  new Image();
   pM[i].onload = function(){
       console.log("pM: "+ this.height);
   }
   pM[i].src = data.products[i].imageUrl;

   testing(pT[i], pM[i]);
}

function testing(pThumb, pMain){
   console.log(pThumb.height);
}

我想要的是一种方法，以便在完成所有内容加载后发送所有信息。

Answer 1

pT[i].onload = function() { 
    alert("Image is Loaded, do you thing on the image here");
}



otherFunction(pT,pM);
function otherFunction(pT,pM) {
    console.log(pT,pM);
}




pT[i] =  new Image();
pT[i].onload = function(){
   pM[i] =  new Image();
   pM[i].onload = function(){
       console.log("pM: "+ this.height);
       testing(pT[i], pM[i]);
   }
} 
pT[i].src = data.products[i].imageUrl;
pM[i].src = data.products[i].imageUrl; // this is very ugly but you'll be sure to call your function when both image are ready. Since i'm not the best with Canvas, I will accept any edit for a better code.

通过for循环发送信息

1 个答案: