질문

저는 저해상도 이미지가 적용된 후 고해상도 이미지를로드 하고 처음로드 된 작은 저해상도 이미지로 설정하는 웹페이지를 작업 중입니다. 이는 작은 블러 처리 된 이미지를 더 빠르게로드 하고 완전히로드 된 후 고해상도 이미지로 흐리지 않은 이미지를 대체 하기위한 것입니다. / strong>.

이 기능을 추가하기 위해 자바스크립트를 시도하고 있지만 멈췄습니다. 특히 나는 이것에 익숙하지 않기 때문에. 이것이 제가 지금까지 쓴 것입니다. 도움을 주시면 감사하겠습니다. 티

(function() {
  let image = document.images //all low-res blurred images of class "image"
  let big_image = document.getElementsByClassName("image")

  function loadImage() {
    for (let i = 0; i <= big_image.length; i++) {
      big_image.onload = function() {
        image[i].src = big_image[i].src
        image[i].className = "noBlur" //set class to noblur from image to remove the blur filter
      }
    }
  }

  setTimeout(function() {
    big_image[0].src = "mainPage/res/fireWatch.jpg" //actual high res image srcs
    big_image[1].src = "mainPage/res/mountainMan.jpg"
    big_image[2].src = "mainPage/res/pyramid.jpg"
    big_image[3].src = "mainPage/res/valley.jpg"
    big_image[4].src = "mainPage/res/valley.jpg"
    big_image[5].src = "mainPage/res/valley.jpg"
  }, 50)
  document.addEventListener('DOMContentLoaded', loadImage, false);
}());