JS 사전 로딩 이미지 구현

이 기사는 모든 사람에게 도움이 되기를 바라며 주로 JS 사전 로딩 이미지 구현을 공유합니다.

요구 사항: 배경 이미지 전환 기능을 구현하려면 프로젝트에서 버튼을 클릭하세요.
문제: CSS의 background-image 속성을 전환할 때 이미지가 먼저 로드된 후 표시되면 잠시 공백 기간이 발생합니다.

해결책: 배경 이미지를 미리 로드하세요
먼저 Image() 생성자를 사용하여 오프스크린 이미지 개체를 만든 다음 개체의 src 속성을 URL로 설정합니다. 이미지 요소는 문서에 추가되지 않으므로 보이지 않지만 브라우저는 계속 로드됩니다. 이미지를 저장하고 캐시하세요.

function preloadImg(url){
  var imageObj = new Image()
  imageObj.src=url
}var aImgUrlList = ['image1.png', 'image2.png']for (var i of aImgUrlList)
    preloadImg(i)

관련 추천:

js 사전 로딩 이미지 메소드 요약_javascript 기술

위 내용은 JS 사전 로딩 이미지 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!