2016-11-16 53 views
1

我正在製作一個簡單的圖片延遲加載機制。我開始處理一個圖像數組,當我加載每個圖像時,我想從數組中刪除所述圖像。陣列中的元素被刪除得太早?

我的代碼如下:

const removeFromArray = (id) => { 
    const position = images.indexOf(id); 

    if (id.classList.contains(classes.loaded)) { 
     images.splice(id, 1); 
    } 
    } 

    const setHeight = (img, target) => { 
    const parentWidth = img.parentNode.offsetWidth; 
    const initw = target.width; 
    const inith = target.height; 

    return (parentWidth/initw) * inith; 
    } 

    const loadImage = (img) => { 
    const image = new Image(); 

    img.classList.add(classes.loading); 
    image.src = img.getAttribute('data-lazy-img'); 
    image.onload = function(e) { 
     const target = e.target || e.srcElement; 

     img.style.height = `${setHeight(img, target)}px`; 
     img.classList.add(classes.loaded); 
     img.classList.remove(classes.loading); 
     img.src = img.getAttribute('data-lazy-img'); 

     removeFromArray(img); 
    } 
    } 

問題是,有時錯誤的圖像被去除(特別是當我除去後者的)。

我的整個代碼是在這裏:http://codepen.io/tomekbuszewski/pen/LbRQxq?editors=0011

我能做些什麼?

+1

不應該'images.splice(ID, 1);'be' images.splice(position,1);'? –

回答

1

這似乎沒有什麼意義與圖片ID叫splice作爲參數:

images.splice(id, 1); 

你可能打算這樣做:

images.splice(position, 1); 
+0

你是完全正確的!謝謝! –

+1

此問題應該作爲拼寫錯誤關閉。 –