對於div的removeChild DOM 8錯誤

我是一個新手，我知道我的代碼不是最好的，但我正在學習。我將幾個圖像序列動畫放在一起，作爲事件的函數觸發。點擊一個按鈕，動畫。將鼠標懸停在動畫上。等對於div的removeChild DOM 8錯誤

我認爲我遇到的麻煩是動畫中斷。如果walk_div.removeChild（img）在第二個else中出現「Uncaught Error：NOT_FOUND_ERR：DOM Exception 8」。

圖像序列然後開始基本上閃爍。任何幫助？

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

編輯：首先，感謝您的迴應！

使用setAnimationFrame的部分問題是它在IE中不可靠。我也有最多175幀的圖像序列，所以映射一個巨大的圖像聽起來像很多工作 - 但是，至少現在我知道我甚至可以做到這一點。其他項目可能會很方便。

這些動畫有一個非常具體的開始和停止。當用戶與網頁交互時，漫畫指向不同的元素。我最終從div中刪除firstChild。我意識到我正在調用一個特定的圖像，所以當它不在那裏時，動畫將被打斷，這就是爲什麼我得到了DOM 8.現在它運行得更好了。

我現在需要做的是在另一個開始時停止動畫。我發現你不能用Javascript做到這一點。我可以清除間隔，但他們需要是全球性的，我還沒有困惑如何做到這一點。我唯一的想法是在獨立的div中運行它們，根據活動函數隱藏或顯示。然而，這意味着動畫繼續運行......只是在後臺。除開場動畫以外，他們只有30幀，並且我將圖像製作成文件大小很小，但要繼續運行很多。我會用它作爲最後的手段，但我更想找到更好的方法。

編輯編輯：

我結束了使用同樣的做法與圖像 - 添加和刪除DIV動畫運行在我的理解，它可能不是最優雅的方式來做到這一點，但直到事情是位更多標準（咳嗽 IE 咳嗽）它必須做的。它也適用於所有主流瀏覽器，甚至支持IE7。

我很感謝大家花時間！

來源

2013-02-25 Akexis

只是你知道，它的最佳做法是不使用setInterval（）。它實際上並不意味着你的代碼將在這些間隔中執行。在這裏閱讀我的回覆：http://stackoverflow.com/questions/6759058/how-can-i-stop-an-ajax-call-keeping-a-php-session-alive/15078734#15078734 – 2013-02-25 23:50:57

@ CharlesAddis-「最好的「是相對的，按照什麼標準衡量？ – RobG 2013-02-26 00:42:06

@RobG因爲在這種情況下，目的是動畫，並且setAnimationFrame是爲此設計的。它的優越之處在於，它允許瀏覽器瞭解計時器背後的原因，以便在不需要動畫時（例如，選項卡未處於活動狀態，或者移動應用程序被隱藏），則不必觸發回調。而setTimeout/Interval會持續不斷（甚至在沒有必要的情況下）發射（在某些情況下會更慢）。此外，requestAnimationFrame與幀更新正確同步，可以減少由時間問題（如輸入延遲）引起的問題。 – Nimphious 2013-02-26 00:53:35

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/

這類似於你自己的另一種方法是簡單地隱藏未使用的幀，而不是摧毀它們並重新創建它們。但我不會推薦這種方法。

來源

2013-02-26 00:08:58 Nimphious

對於div的removeChild DOM 8錯誤

回答

相關問題