ユーザーがフロントページを離れたときにHTML5 <CANVAS>のアニメーションがJoomlaで正しく表示されない

Question

JavaScriptとHTML5タグを使用して自分のJoomlaテンプレートに素敵な（！）アニメーションを作成しました 異なるレイヤーに7つの透明な雲がすべて動きますページの向こう側に移動しながら、互いの上に表示されます。サイト名は、その上にあるレイヤーに応じて、雲がその背後にあるか、または雲の前に入るようにするためのものです。

あなたが自分自身でそれを見ることができます： http://www.flunki.com

すべては、フロントページ上で動作します。 しかし、リンク（たとえば、左側のブログ）をクリックすると、アニメーションが停止し、画面の左側に静的な雲（時には2つ）があります。 フロントページに戻ってもこれは解決されず、リロードも行われません。 F5リロードにより問題が解決されます。

私には、ページをどこかにキャッシュすること（JoomlaのCacheはオフになっています）と関係がありますが、問題を解決する方法が見つかりませんでした。

誰でもお手伝いできますか？ init()で

<script type="text/javascript"> 
var canvas; 
var ctx; 
var max; 
var logopos; 
var background; 
var logo; 
var width = 1300; 
var height = 150; 
var cloud1; 
var cloud1_x; 
var cloud1_y; 
var cloud2; 
var cloud2_x; 
var cloud2_y; 
var cloud3; 
var cloud3_x; 
var cloud3_y; 
var cloud4; 
var cloud4_x; 
var cloud4_y; 
var cloud5; 
var cloud5_x; 
var cloud5_y; 
var cloud6; 
var cloud6_x; 
var cloud6_y; 
var cloud7; 
var cloud7_x; 
var cloud7_y; 
var cloud8; 
var cloud8_x; 
var cloud8_y; 
var irun; 

function init() { 
    canvas = document.getElementById("clouds"); 
    width = window.innerWidth; 
irun =+ 1; 
    height = canvas.height; 
    ctx = canvas.getContext("2d"); 

    // init background 
    background = new Image(); 
    background.src = 'http://www.flunki.com/templates/celebs_plazza/images/backblue.png'; 

// init logo 
    logo = new Image(); 
    logo.src = 'http://www.flunki.com/templates/celebs_plazza/images/logo.png'; 


    // init cloud1 
    cloud1 = new Image(); 
    cloud1.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png'; 
    cloud1.onload = function(){ 
    cloud1_x = 60; 
     cloud1_y = 5; 
}; 

// init cloud3 
    cloud3 = new Image(); 
    cloud3.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png'; 
    cloud3.onload = function(){ 
    cloud3_x = max/2; 
     cloud3_y = 60; 
}; 
// init cloud5 
    cloud5 = new Image(); 
    cloud5.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png'; 
    cloud5.onload = function(){ 
    cloud5_x = max-180; 
     cloud5_y = 35; 
}; 
// init cloud7 
    cloud7 = new Image(); 
    cloud7.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png'; 
    cloud7.onload = function(){ 
    cloud7_x = 200; 
     cloud7_y = 75; 
}; 

// init cloud2 
    cloud2 = new Image(); 
    cloud2.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png'; 
    cloud2.onload = function(){ 
    cloud2_x = max-100; 
     cloud2_y = 15; 
}; 

// init cloud4 
    cloud4 = new Image(); 
    cloud4.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png'; 
    cloud4.onload = function(){ 
    cloud4_x = max-300; 
     cloud4_y = -15; 
}; 

// init cloud6 
    cloud6 = new Image(); 
    cloud6.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png'; 
    cloud6.onload = function(){ 
    cloud6_x = max-560; 
     cloud6_y = 8; 
}; 

// init cloud8 
    cloud8 = new Image(); 
    cloud8.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png'; 
    cloud8.onload = function(){ 
    cloud8_x = 0; 
     cloud8_y = 38; 
}; 

return setInterval(main_loop, 10); 
} 

function update(){ 
max = window.innerWidth; 
logopos = (640 + ((window.innerWidth-960)/2)); 
cloud1_x -= .05; 
if (cloud1_x < -128) { 
cloud1_x = max; 
} 
cloud3_x -= .2; 
if (cloud3_x < -128) { 
cloud3_x = max; 
} 
cloud5_x -= .15; 
if (cloud5_x < -128) { 
cloud5_x = max; 
} 
cloud7_x -= .1; 
if (cloud7_x < -128) { 
cloud7_x = max; 
} 
cloud2_x += .1; 
if (cloud2_x>max) { 
cloud2_x = -128; 
} 
cloud4_x += .05; 
if (cloud4_x>max) { 
cloud4_x = -128; 
} 
cloud6_x += .15; 
if (cloud6_x>max) { 
cloud6_x = -128; 
} 
cloud8_x += .2; 
if (cloud8_x>max) { 
cloud8_x = -128; 
} 
} 

function draw() { 
ctx.canvas.width = window.innerWidth-20; 
ctx.drawImage(background,0,0); 

ctx.drawImage(cloud1, cloud1_x, cloud1_y); 
ctx.drawImage(cloud2, cloud2_x, cloud2_y); 
ctx.drawImage(cloud3, cloud3_x, cloud3_y); 
ctx.drawImage(cloud4, cloud4_x, cloud4_y); 
ctx.drawImage(cloud5, cloud5_x, cloud5_y); 
ctx.drawImage(cloud6, cloud6_x, cloud6_y); 
ctx.drawImage(logo,logopos,0); 
ctx.drawImage(cloud7, cloud7_x, cloud7_y); 
// ctx.drawImage(cloud8, cloud8_x, cloud8_y); 

} 

function main_loop() { 
    draw(); 
    update(); 
} 

init(); 



</script> 

Answer 1

1）あなたは右の後に呼び出される関数update()で定義された変数max使用している：ここでは

は、テンプレートの一部であるコード、です。 init()の前に、または最初に maxを定義する必要があります。私は本当になぜこれが時にはうまくいくのかわからない。 <body>が解析されていて、それが起こる前に、あなたのスクリプトが発射された後 max = window.innerWidth

window.innerWidthが利用可能である）

2 - キャッシュがクリアされているとき、時々は（）それはすべての必要なDOMのものをロードして計算するのに十分な時間を持っていますwindow.innerWidth

私はあなたが

window.addEvent('domready', function() { 
    init(); 
}); 

3 DOMReadyイベントにごinit()機能を置くことを避けることができるので、あなたはMooToolsのを使用している参照）誰もいません答えはあなたのコードが混乱なので、学ぶ：問題は最終的に、あった場所

• 配列
• ループ

[OK]を

Answer 2

（のため）私は考え出しました。

まず、テンプレートからコードを削除してモジュールを作成しました。これにより、ユーザーがメニュー項目をクリックしたときにページが更新されるたびに読み込まれるようになりました。

これで修正されませんでした。

私はアニメーションを使い始める前にサイトに戻って、自分のコードを自分のモジュールで使いました。しばらく働いてから停止しました。なぜかわからないけど、コードを単純なHTML5のキャンバスアニメーションのものに置き換え、フロントページのどこでもうまくいきました。私のコードでなければなりませんでした。

私はそれを取り返し、画像が更新されるたびに（すべてのグラフィックスがロードされていた）window.innerWidthを使用してロゴを再描画していることがわかりました。最初にページが読み込まれたときに機能しましたが、それ以降の時間はrezonerと指摘されていませんでした。これにより、DOMReadyのすべてのサブタイトルが見つかりました（ありがとう）。

下のupdtateコードはこれを反映しており、魅力的です。

<!doctype html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>flunkibanner</title> 
    </head> 
<body> 
    <section> 
    <div> 
     <canvas id="clouds" width="100%" > 
     Your browser does not fully support HTML5.<BR> 
Maybe it is time to upgrade ? 

     </canvas> 

    </div> 

<script type="text/javascript"> 
var canvas; 
var ctx; 
var max; 
var logopos; 
var background; 
var logo; 
var width = 1300; 
var height = 150; 
var cloud1; 
var cloud1_x; 
var cloud1_y; 
var cloud2; 
var cloud2_x; 
var cloud2_y; 
var cloud3; 
var cloud3_x; 
var cloud3_y; 
var cloud4; 
var cloud4_x; 
var cloud4_y; 
var cloud5; 
var cloud5_x; 
var cloud5_y; 
var cloud6; 
var cloud6_x; 
var cloud6_y; 
var cloud7; 
var cloud7_x; 
var cloud7_y; 
var cloud8; 
var cloud8_x; 
var cloud8_y; 

function init() { 
    canvas = document.getElementById("clouds"); 
    width = window.innerWidth; 
    max = window.innerWidth; 
    height = canvas.height; 
    ctx = canvas.getContext("2d"); 
    ctx.canvas.width = window.innerWidth-20; 

    // init background 
    background = new Image(); 
    background.src = 'http://www.flunki.com/templates/celebs_plazza/images/backblue.png'; 

// init logo 
    logo = new Image(); 
    logo.src = 'http://www.flunki.com/templates/celebs_plazza/images/logo.png'; 
    logopos = (640 + ((window.innerWidth-960)/2)); 

    // init cloud1 
    cloud1 = new Image(); 
    cloud1.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png'; 
    cloud1.onload = function(){ 
    cloud1_x = 60; 
     cloud1_y = 5; 
}; 

// init cloud3 
    cloud3 = new Image(); 
    cloud3.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png'; 
    cloud3.onload = function(){ 
    cloud3_x = max/2; 
     cloud3_y = 60; 
}; 
// init cloud5 
    cloud5 = new Image(); 
    cloud5.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png'; 
    cloud5.onload = function(){ 
    cloud5_x = max-180; 
     cloud5_y = 35; 
}; 
// init cloud7 
    cloud7 = new Image(); 
    cloud7.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png'; 
    cloud7.onload = function(){ 
    cloud7_x = 200; 
     cloud7_y = 75; 
}; 

// init cloud2 
    cloud2 = new Image(); 
    cloud2.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png'; 
    cloud2.onload = function(){ 
    cloud2_x = max-100; 
     cloud2_y = 15; 
}; 

// init cloud4 
    cloud4 = new Image(); 
    cloud4.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png'; 
    cloud4.onload = function(){ 
    cloud4_x = max-300; 
     cloud4_y = -15; 
}; 

// init cloud6 
    cloud6 = new Image(); 
    cloud6.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png'; 
    cloud6.onload = function(){ 
    cloud6_x = max-560; 
     cloud6_y = 8; 
}; 

// init cloud8 
    cloud8 = new Image(); 
    cloud8.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png'; 
    cloud8.onload = function(){ 
    cloud8_x = 0; 
     cloud8_y = 38; 
}; 

return setInterval(main_loop, 10); 
} 

function update(){ 


cloud1_x -= .05; 
if (cloud1_x < -128) { 
cloud1_x = max; 
} 
cloud3_x -= .2; 
if (cloud3_x < -128) { 
cloud3_x = max; 
} 
cloud5_x -= .15; 
if (cloud5_x < -128) { 
cloud5_x = max; 
} 
cloud7_x -= .1; 
if (cloud7_x < -128) { 
cloud7_x = max; 
} 
cloud2_x += .1; 
if (cloud2_x>max) { 
cloud2_x = -128; 
} 
cloud4_x += .05; 
if (cloud4_x>max) { 
cloud4_x = -128; 
} 
cloud6_x += .15; 
if (cloud6_x>max) { 
cloud6_x = -128; 
} 
cloud8_x += .2; 
if (cloud8_x>max) { 
cloud8_x = -128; 
} 
} 

function draw() { 

ctx.drawImage(background,0,0); 
ctx.drawImage(cloud1, cloud1_x, cloud1_y); 
ctx.drawImage(cloud2, cloud2_x, cloud2_y); 
ctx.drawImage(cloud3, cloud3_x, cloud3_y); 
ctx.drawImage(cloud4, cloud4_x, cloud4_y); 
ctx.drawImage(cloud5, cloud5_x, cloud5_y); 
ctx.drawImage(cloud6, cloud6_x, cloud6_y); 
ctx.drawImage(logo,logopos,0); 
ctx.drawImage(cloud7, cloud7_x, cloud7_y); 
// ctx.drawImage(cloud8, cloud8_x, cloud8_y); 

} 

function main_loop() { 
    draw(); 
    update(); 
} 

window.addEvent('domready', function() { 
    init(); 
}); 
</script> 

    </section> 
</body> 
</html>