Início / coding / Perguntas / 77478965
Accepted
Math
Asked: 2023-11-14 15:54:21 +0800 CST

Como evitar que o src da imagem seja definido continuamente?

  • 772

Estou trabalhando em uma coisinha onde preciso verificar se o img.srcjá está configurado ou não, para evitar que ele seja configurado continuamente, como está acontecendo agora. O problema está no meu onMove. Como eu posso fazer isso?

HTML:

<div data-tail></div>

<button type="button" data-src="./dist/img/1.jpg">
  text 1
</button>
<button type="button" data-src="./dist/img/2.jpg">
  text 2
</button>
<button type="button" data-src="./dist/img/3.jpg">
  text 3
</button>

JS:

const tail = document.querySelector('[data-tail]') 

window.addEventListener('mouseenter', onEnter)
window.addEventListener('mousemove', onMove)

onEnter(e) {
  let img = new Image()
  tail.appendChild(img)

  gsap.to(tail, {
    autoAlpha: 1,
    duration: 0.25
  })
}

onMove(e) {
  const el = e.target

  if (el.type == 'button') {
    const img = tail.querySelector('img')
    img.src = el.dataset.src
  }

  gsap.to(tail,{
    x:e.clientX,
    y:e.clientY
  })
}
javascript

2 respostas

  1. Best Answer

    Yoy pode verificar se o srcatributo já está definido ou não, por exemplo:

    if (el.type == 'button') {
    const img = tail.querySelector('img');
    img.src = img.src || el.dataset.src;
}

    Atualização: acho que você quer algo assim:

    if (el.type == 'button') {
    const img = tail.querySelector('img');
    if (img.src !== el.dataset.src) {
        img.src = el.dataset.src;
    }
}
    • 1

  2. Você pode usar o mouseoverevento, que borbulha:

    const tail = document.querySelector('[data-tail]') 

window.addEventListener('mouseenter', onEnter)
window.addEventListener('mouseover', onOver)
window.addEventListener('mousemove', onMove)

function onEnter(e) {
  let img = new Image()
  tail.appendChild(img)

  gsap.to(tail, {
    autoAlpha: 1,
    duration: 0.25,
  })
}

function onOver(e) {
  const el = e.target

  if (el.type == 'button') {
    const img = tail.querySelector('img')
    img.src = el.dataset.src
  }
}

function onMove(e) {
  gsap.to(tail, {
    x: e.clientX,
    y: e.clientY,
  })
}
    • 1

relate perguntas