0

外部の .js ファイルからアニメーション PNG を動的に配置しようとしています。最初に、タグ内のコードを配置する場所にアニメーションを描画する単純なアニメーション png ソリューションを見つけましたが<script>、外部ファイルから関数を適切に呼び出す方法がわからないようです。

スクリプトはAnimatedPNGからのもので、次のようになります。

<script type="text/javascript" src="animatedpng.js"></script>
<div id="pnganim" align="center">
    <script>
        fishAnim = new AnimatedPNG('fish', 't01.png', 3, 100);
        fishAnim.draw(false);
    </script>
</div>

今、私はこれをexternal.jsファイルとjQueryから呼び出そうとしています:

function addFish(){
    $('#pnganim').html('<script type="text/javascript" src="animatedpng.js" />');
    fishAnim = new AnimatedPNG('fish', 'fish01.png', 3, 100);
    myFish = fishAnim.draw(false);
    $('#pnganim').append(myFish);
}

...そして、それは機能していません。addFish 関数を呼び出すボタンをクリックすると、空白ページの最初のフレームだけが開きます。

ここで何が間違っていますか？

ありがとう

4

2 に答える 2

0

  1. を使用する理由がわかりません $('#pnganim').html('<script ... />);。

    これ<script type="text/javascript" src="animatedpng.js"></script>を に配置するだけ<head>です。

  2. $('#pnganim').append(myFish);意味がありません。関数は、draw追加できる html 要素を返しません#pnganim

代わりに、コードはおそらく次のようになります

function addFish(){
    $('#pnganim').html('<script type="text/javascript">var fishAnim = new AnimatedPNG("fish", "fish01.png", 3, 100);fishAnim.draw(false);</script>');
}
于 2010-03-21T11:15:41.553 に答える
0

新しいANimatedPNGを実行すると、おそらくjsスクリプトがロードされません。AnimatedNG が定義されていないことを示すエラーについてコンソールを確認してみてください。これは、jQuery の AJAX スクリプトの読み込みを使用して修正できます。

$.getScript('animatedpng.js', function(){
   fishAnim = new AnimatedPNG('fish', 'fish01.png', 3, 100);
   myFish = fishAnim.draw(false);
   $('#pnganim').append(myFish); //this line looks fishy too (chuckle)
});
于 2010-03-21T11:15:46.103 に答える