私は単純な画像レイジーローディング機構を作っています。私は処理する画像の配列から始め、それぞれをロードすると、配列からその画像を取り除きたいと思います。次のように配列の要素が早すぎて削除されていますか?
私のコードは次のとおりです。
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
私は何ができますか?
'images.splice(IDはなく、 1); '' images.splice(position、1)にする; '? –