Can't call animated png script from external js file_问答_开发者

Can't call animated png script from external js file

开发者 https://www.devze.com 2022-12-24 16:17 出处：网络

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 no

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

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