Can't call animated png script from external js file
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 jQue开发者_如何学Pythonry:
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
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. Thedrawfunction 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>');
}
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)
});
加载中,请稍侯......
精彩评论