Ошибка DOM 8 в removeChild для div

Question

Я немного новичок, и я знаю, что мой код не самый лучший, но я учусь. Я собираю несколько анимаций последовательности изображений, которые запускаются как функции событий. Нажмите кнопку, анимацию. Наведите указатель мыши на div, анимацию. И т. Д.

Я думаю, что проблема, с которой я сталкиваюсь, - это когда анимация прерывается. Я получаю сообщение «Uncaught Error: NOT_FOUND_ERR: DOM Exception 8» во втором случае, если walk_div.removeChild (img);

Последовательность изображений затем начинает мигать. Любая помощь?

function loadUp(){ 
var cyclenum = 175; 
var folder = "animations/rollO/"; 
var imgType = '.png'; 
var count = 0; 
var subCount = 1; 
var initialImg = new Image(); 
initialImg.src = folder + '1.png'; 
var walk_div = document.getElementById('begin'); 
var img = new Image(); 
walk_div.appendChild(initialImg); 

function animation(){ 
count++; 
subCount = count - 1; 

    if(count == cyclenum){ 
     clearInterval(walkAnimate); 
    } 
    else if(count == 1){ 
     subCount = 2; 
     img.src = folder + subCount + imgType; 
     walk_div.removeChild(initialImg); 
     walk_div.appendChild(img); 
     count = 2;  
    } 
    else if (count < cyclenum){ 
     img.src = folder + subCount + imgType; 
     walk_div.removeChild(img);  
     img.src = folder + count + imgType; 
     walk_div.appendChild(img); 
    } 
} 

var walkAnimate = setInterval(animation, 42); 
} 

function preAction(){ 
var cyclenum = 30; 
var folder = "animations/pre/"; 
var imgType = '.png'; 
var count = 0; 
var subCount = 1; 
var initialImg = new Image(); 
initialImg.src = folder + '1.png'; 
//Clears out the walk div 
var rmv = document.getElementById('begin'); 
if (rmv.hasChildNodes()){ 
    while (rmv.childNodes.length >= 1) 
    { 
     rmv.removeChild(rmv.firstChild); 
    } 
} 
//end clear 
var walk_div = document.getElementById('begin'); 
var img = new Image(); 
walk_div.appendChild(initialImg); 

    function animation(){ 
    count++; 
    subCount = count - 1; 

     if(count == cyclenum){ 
      clearInterval(walkAnimate); 
     } 
     else if(count == 1){ 
      subCount = 2; 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(initialImg); 
      walk_div.appendChild(img); 
      count = 2;  
     } 
     else if (count < cyclenum){ 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(img);  
      img.src = folder + count + imgType; 
      walk_div.appendChild(img); 
     } 
    } 

    var walkAnimate = setInterval(animation, 42); 
} 

function nextAction(){ 
var cyclenum = 30; 
var folder = "animations/next/"; 
var imgType = '.png'; 
var count = 0; 
var subCount = 1; 
var initialImg = new Image(); 
initialImg.src = folder + '1.png'; 
//Clears out the walk div 
var rmv = document.getElementById('begin'); 
if (rmv.hasChildNodes()){ 
    while (rmv.childNodes.length >= 1) 
    { 
     rmv.removeChild(rmv.firstChild); 
    } 
} 
//end clear 
var walk_div = document.getElementById('begin'); 
var img = new Image(); 
walk_div.appendChild(initialImg); 

    function animation(){ 
    count++; 
    subCount = count - 1; 

     if(count == cyclenum){ 
      clearInterval(walkAnimate); 
     } 
     else if(count == 1){ 
      subCount = 2; 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(initialImg); 
      walk_div.appendChild(img); 
      count = 2;  
     } 
     else if (count < cyclenum){ 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(img);  
      img.src = folder + count + imgType; 
      walk_div.appendChild(img); 
     } 
    } 

    var walkAnimate = setInterval(animation, 42); 
} 

function galleryRightIn(){ 
var cyclenum = 15; 
var folder = "animations/galleryRIn/"; 
var imgType = '.png'; 
var count = 0; 
var subCount = 1; 
var initialImg = new Image(); 
initialImg.src = folder + '1.png'; 
//Clears out the walk div 
var rmv = document.getElementById('begin'); 
if (rmv.hasChildNodes()){ 
    while (rmv.childNodes.length >= 1) 
    { 
     rmv.removeChild(rmv.firstChild); 
    } 
} 
//end clear 
var walk_div = document.getElementById('begin'); 
var img = new Image(); 
walk_div.appendChild(initialImg); 

    function animation(){ 
    count++; 
    subCount = count - 1; 

     if(count == cyclenum){ 
      clearInterval(walkAnimate); 
     } 
     else if(count == 1){ 
      subCount = 2; 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(initialImg); 
      walk_div.appendChild(img); 
      count = 2;  
     } 
     else if (count < cyclenum){ 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(img);  
      img.src = folder + count + imgType; 
      walk_div.appendChild(img); 
     } 
    } 

    var walkAnimate = setInterval(animation, 42); 
} 

function galleryRightOut(){ 
var cyclenum = 15; 
var folder = "animations/galleryROut/"; 
var imgType = '.png'; 
var count = 0; 
var subCount = 1; 
var initialImg = new Image(); 
initialImg.src = folder + '1.png'; 
//Clears out the walk div 
var rmv = document.getElementById('begin'); 
if (rmv.hasChildNodes()){ 
    while (rmv.childNodes.length >= 1) 
    { 
     rmv.removeChild(rmv.firstChild); 
    } 
} 
//end clear 
var walk_div = document.getElementById('begin'); 
var img = new Image(); 
walk_div.appendChild(initialImg); 

    function animation(){ 
    count++; 
    subCount = count - 1; 

     if(count == cyclenum){ 
      clearInterval(walkAnimate); 
     } 
     else if(count == 1){ 
      subCount = 2; 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(initialImg); 
      walk_div.appendChild(img); 
      count = 2;  
     } 
     else if (count < cyclenum){ 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(img);  
      img.src = folder + count + imgType; 
      walk_div.appendChild(img); 
     } 
    } 

    var walkAnimate = setInterval(animation, 42); 
} 

function galleryBackIn(){ 
var cyclenum = 15; 
var folder = "animations/galleryBIn/"; 
var imgType = '.png'; 
var count = 0; 
var subCount = 1; 
var initialImg = new Image(); 
initialImg.src = folder + '1.png'; 
//Clears out the walk div 
var rmv = document.getElementById('begin'); 
if (rmv.hasChildNodes()){ 
    while (rmv.childNodes.length >= 1) 
    { 
     rmv.removeChild(rmv.firstChild); 
    } 
} 
//end clear 
var walk_div = document.getElementById('begin'); 
var img = new Image(); 
walk_div.appendChild(initialImg); 

    function animation(){ 
    count++; 
    subCount = count - 1; 

     if(count == cyclenum){ 
      clearInterval(walkAnimate); 
     } 
     else if(count == 1){ 
      subCount = 2; 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(initialImg); 
      walk_div.appendChild(img); 
      count = 2;  
     } 
     else if (count < cyclenum){ 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(img);  
      img.src = folder + count + imgType; 
      walk_div.appendChild(img); 
     } 
    } 

    var walkAnimate = setInterval(animation, 42); 
} 

function galleryBackOut(){ 
var cyclenum = 15; 
var folder = "animations/galleryBOut/"; 
var imgType = '.png'; 
var count = 0; 
var subCount = 1; 
var initialImg = new Image(); 
initialImg.src = folder + '1.png'; 
//Clears out the walk div 
var rmv = document.getElementById('begin'); 
if (rmv.hasChildNodes()){ 
    while (rmv.childNodes.length >= 1) 
    { 
     rmv.removeChild(rmv.firstChild); 
    } 
} 
//end clear 
var walk_div = document.getElementById('begin'); 
var img = new Image(); 
walk_div.appendChild(initialImg); 

    function animation(){ 
    count++; 
    subCount = count - 1; 

     if(count == cyclenum){ 
      clearInterval(walkAnimate); 
     } 
     else if(count == 1){ 
      subCount = 2; 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(initialImg); 
      walk_div.appendChild(img); 
      count = 2;  
     } 
     else if (count < cyclenum){ 
      img.src = folder + subCount + imgType; 
      walk_div.removeChild(img);  
      img.src = folder + count + imgType; 
      walk_div.appendChild(img); 
     } 
    } 

    var walkAnimate = setInterval(animation, 42); 
} 

EDIT: Прежде всего, спасибо за реагирование!

Часть проблемы с использованием setAnimationFrame в IE это ненадежная информация. У меня также есть последовательности изображений не более 175 кадров, поэтому отображение одного гигантского изображения звучит как большая работа, но, по крайней мере, теперь я знаю, что могу это сделать. Может быть полезно для других проектов.

Эти анимации имеют очень специфический старт и остановку. Мультфильм указывает на разные элементы, поскольку пользователь взаимодействует с веб-страницей. В итоге я удалил firstChild из div. Я понял, что я призываю конкретный образ, и поэтому, когда его не было, когда анимация прервалась, вот почему я получил DOM 8. Теперь он работает намного лучше.

Что мне нужно сделать, это остановить анимацию, когда начинается другая. Я нахожу, что вы не можете сделать это с помощью Javascript. Я могу очистить интервал, но они должны быть глобальными, и я еще не озадачил, как это сделать. Моя единственная мысль - запустить их в отдельных div и скрыть или показать в зависимости от активной функции. Это, однако, означает, что анимация продолжает работать ... только в фоновом режиме. За исключением анимации открытия, они всего 30 кадров, и я сделал изображения крошечными в размере файла, но это много, чтобы продолжать работать. Я буду использовать его как последнее средство, но я бы предпочел найти лучший способ.

EDIT EDIT:.

Я закончил с использованием той же практике, с изображениями - добавление и удаление DIV анимация работает в Я понимаю, что это, вероятно, не самый элегантный способ сделать это, но пока все не являются бит более стандартный (кашель IE кашель) это должно будет сделать. Он также работает во всех основных браузерах с поддержкой IE7.

Я ценю, что вы все тратите время!

Answer 1

Ошибка DOM 8 означает, что он не смог найти элемент, который вы пытаетесь удалить. Вы пытаетесь удалить несуществующий элемент.

Вам необходимо определить необходимость удаления элемента по-другому или использовать другой метод для обнаружения самого элемента.

Однако ничто из этого не имеет значения, потому что то, что вы пытаетесь сделать, сделано гораздо лучше по-другому. Вместо того чтобы создавать и разрушать элементы, как это вы должны либо использовать полосу изображения и изменить положение фона, как это:

// Wait for the window load event and start the animation. 
window.addEventListener('load', init, false); 

var frame = 0; // Current frame 
var frames = 8; // Frame count 
var frameWidth = 64; // Frame dimensions 
var frameHeight = 64; 
var element; // DOM element to animate 

function init() { 
    // Fetch the dom element. 
    element = document.getElementById('anim'); 
    // Begin the animation. Ideally you would use requestAnimationFrame but I'm 
    // using setInterval for simplicity. 
    setInterval(animate, 120); 
} 

function animate() { 
    // Increment the frame number. 
    frame = (frame + 1) % frames; 
    // Set the element's backgroundPosition to "0px -#px" according to the frame 
    // number and size. 
    element.style.backgroundPosition = '0px -' + (frame * frameHeight) + 'px'; 
    // You use negative dimensions here because it's an offset of the background 
    // image, and moving the image up requires negative dimensions, since 
    // positive on the Y-axis is down. 
} 

Вы можете увидеть его здесь работать: http://jsfiddle.net/xfYk6/

Другой метод, который похож на свой собственный заключается в том, чтобы просто скрыть неиспользуемые кадры, а не уничтожать их и воссоздавать. Однако я бы не рекомендовал этот метод.