Не удается вызвать анимированный сценарий png из внешнего файла js - PullRequest
Новая
       17

Не удается вызвать анимированный сценарий png из внешнего файла js

0 голосов
/ 21 марта 2010

Я пытаюсь динамически поместить анимированный PNG из внешнего файла .js.Сначала я нашел простое анимированное 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, открывается только первый кадр на пустой странице.

Что я здесь не так делаю?

Спасибо

Ответы [ 2 ]

0 голосов
/ 21 марта 2010

Ваш js-скрипт, вероятно, не загружается, когда вы делаете новую вещь ANimatedPNG. Попробуйте проверить консоль на наличие ошибки о том, что AnimatedNG не определен. Это можно исправить с помощью загрузки скрипта AJAX в 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)
});
0 голосов
/ 21 марта 2010

  1. Я не знаю, почему вы используете $('#pnganim').html('<script ... />);.

    Просто поместите это <script type="text/javascript" src="animatedpng.js"></script> в свой <head>.

  2. $('#pnganim').append(myFish); не имеет никакого смысла. Функция draw не возвращает HTML-элемент, который может быть добавлен к #pnganim

Вместо этого ваш код, вероятно, должен выглядеть следующим образом 

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