ページ上で data-original-bg を持つ要素を検索し、それを背景画像の URL スタイルとして割り当てる交差オブザーバーを設定しようとしているため、画像がポストロードされます。
React コンポーネントに関数を記述し、それを ComponentDid Mount にロードしましたが、「参照ではない rvalue に割り当てることはできません」というエラーが表示されます - 行に
return target.hasAttribute('data-original-bg') ? target.getAttribute('style') += 'background-image:' + backgroundImage : target.getAttribute('style') += 'background-image:' + backgroundImage
私の機能:
componentDidMount () {
this.setIndex = window.setInterval(() => {
this.setupObserver()
}, 3000)
}
setupObserver () {
var nodes = document.querySelectorAll('img[data-original],div[data-original-bg]')
window.io = new IntersectionObserver(function (items) {
for (var i = 0; i < items.length; i++) {
var item = items[i]
var target = item.target
if (target.hasAttribute('src')) {
window.io.unobserve(target)
continue
}
if (!item.intersectionRatio) continue
return target.hasAttribute('data-original-bg') ? target.getAttribute('style') += 'background-image:' + backgroundImage : target.getAttribute('style') += 'background-image:' + backgroundImage
if (target.hasAttribute('data-original')) target.setAttribute('src', target.getAttribute('data-original'))
window.io.unobserve(target)
}
})
for (var i = 0; i < nodes.length; i++) { window.io.observe(nodes[i]) }
}