2010-03-21 19 views
0

J'essaie de mettre dynamiquement un PNG animé à partir d'un fichier .js externe. J'ai d'abord trouvé une solution png animée simple, qui dessine une animation partout où vous placez le code dans les balises <script>, mais il semble maintenant que je ne sais pas comment appeler la fonction correctement depuis un fichier externe.Impossible d'appeler le script png animé à partir du fichier js externe

Le script est de AnimatedPNG, et il ressemble à ceci:

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

Maintenant, je suis en train d'appeler ce fichier à partir external.js et 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); 
} 

.. et ça ne marche pas. Après avoir cliqué sur un bouton qui appelle la fonction addFish, il ouvre uniquement la première image sur une page vierge.

Qu'est-ce que je fais mal ici?

Merci

Répondre

0
  1. Je ne sais pas pourquoi vous utilisez $('#pnganim').html('<script ... />);.

    Il suffit de placer ce <script type="text/javascript" src="animatedpng.js"></script> dans votre <head>.

  2. $('#pnganim').append(myFish); n'a aucun sens. La fonction draw ne renvoie pas un élément HTML qui pourrait être ajouté à #pnganim

bien votre code devrait probablement ressembler à ceci

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

C'est ce que j'ai essayé en premier, mais ça ne marche pas non plus. Firefox Error Console signale les problèmes dans animatedpng.js lui-même, mais l'animation fonctionne lorsque vous écrivez le

0

Votre script js n'est pas chargé propably lorsque vous faites la nouvelle Chose ANimatedPNG. Essayez de vérifier la console pour l'erreur indiquant que AnimatedNG n'est pas défini. Vous pouvez résoudre ce problème en utilisant le chargement du script AJAX de jQuery:

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