Javascript) 바닐라 자바스크립트로 img에 fade in 효과 주기

커스텀해서 쓰실려면 src 넣는 부분에서 약간의 수정이 필요합니다

function imageLoad(targetElement) {
  const imgElement = targetElement;
  // data-lazy 에 지정된 이미지 경로를 <img src=""> 에 셋팅 합니다.


  imgElement.setAttribute('src', imgElement.getAttribute('data-lazy'));
  imgElement.style.opacity = 0;

  function fadeIn() {
	  var opacity = 0;
	  imgElement.removeAttribute('data-lazy');
	  var intervalID = setInterval(function() {
		  if (opacity < 1) {
			  opacity = opacity + 0.1
			  imgElement.style.opacity = opacity;
		  } else {
			  clearInterval(intervalID);
		  }
	  }, 10);
  }

  imgElement.onload = fadeIn();

}

도움되셨다면 하단의 광고 한번 클릭 부탁드립니다 :)