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

【问题标题】：Can't call animated png script from external js file无法从外部 js 文件调用动画 png 脚本
【发布时间】：2011-01-29 22:55:23
【问题描述】：

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

我在这里做错了什么？

谢谢

【问题讨论】：

标签： jquery scripting png external animated

【解决方案1】：

我不知道你为什么使用$('#pnganim').html('<script ... />);。

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

相反，您的代码可能应该是这样的

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

【讨论】：

这是我首先尝试过的，但它也不起作用。 Firefox 错误控制台指出了 animatedpng.js 本身存在的问题，但在 html 中手动编写
它说明了什么问题？（因为我在控制台中看不到任何内容）。您确定您的目录中存在 fish01.png fish02.png 和 fish03.png 文件吗？您也可以尝试稍微修改一下我制作的 AnimatedPNG 源（它更安全，不会触发任何错误）pastebin.com/iW0tVK2E

【解决方案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)
});

【讨论】：