Question

我正在尝试从外部.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函数的按钮后，它仅打开空白页面上的第一帧。

我在这里做错了什么？

由于

Answer 1

我不知道您使用$('#pnganim').html('<script ... />);的原因。

只需将此<script type="text/javascript" src="animatedpng.js"></script>放入<head>。
$('#pnganim').append(myFish);没有任何意义。 draw函数不会返回可附加到#pnganim

相反，您的代码应该看起来像这样

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

Answer 2

当你执行新的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)
});

无法从外部js文件调用动画png脚本

2 个答案: