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

发布于 2024-08-26 07:48:18 字数 956 浏览 11 评论 0原文

我正在尝试从外部 .js 文件动态放置动画 PNG。首先，我找到了一个简单的动画 png 解决方案，无论您将代码放在

该脚本来自 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 函数的按钮后，它仅打开空白页上的第一帧。

我在这里做错了什么？

谢谢

原文

I'm trying to put an animated PNG dynamically from external .js file. First I found a simple animated png solution, which draws an animation wherever you put the code within <script> tags, but now it looks like I don't know how to call the function properly from external file.

The script is from AnimatedPNG, and it looks something like this:

<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>

Now, I'm trying to call this from external.js file and 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);
}

... and it's not working. After I click a button that calls the addFish function, it opens only the first frame on a blank page.

What am I doing wrong here?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寻找我们的幸福 2024-09-02 07:48:18

我不知道你为什么使用 $('#pnganim').html(' 放入您的 .
$('#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>');
}

I don't know why you use $('#pnganim').html('<script ... />);.
Just place this <script type="text/javascript" src="animatedpng.js"></script> in your <head>.
$('#pnganim').append(myFish); doesn't make any sense. The draw function doesn't return a html element which could be appended to #pnganim

Instead your code probably should look like this

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

回复收藏 0 原文

你不是我要的菜∠ 2024-09-02 07:48:18

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

Your js script propably is not loaded when you do the new ANimatedPNG thing. Try checking the console for error stating that AnimatedNG is not defined. You can fix this by using jQuery's AJAX script loading:

$.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)
});

回复收藏 0 原文

~没有更多了~