회사에서 프로모션을 진행하는데, 여러장의 이미지를 순차적으로 불러와서 보여줘야하는데, 디바이스에 따라 로딩 속도가 현저히 느리거나 페이지를 아예 불러오지 못하는 이슈가 발생했다.
대부분의 디바이스에서 정상적으로 불러왔지만, 일부 디바이스에서 불러오지 못하거나 수 초의 버벅임이 발생했다.
첫번째로 해결한 방법은 통이미지를 여러개의 이미지로 크롭해서 올리는 방식이었다.
여기에 조건은 크롭한 이미지들이 1MB이하의 크기였다.
이 방법으로 대부분의 디바이스에서 해결이 되었다. 그러나 아직도 일부 디바이스에서 동일한 현상이 발생했다.
우리 회사의 프로젝트는 Spring boot framework에 vue 를 cdn으로 불러와서 사용하며 여러장의 이미지를 v-html으로 불러온다.
solve1)
파일명만 다른 이미지 엘리먼트를 20여번 불러와야하는데, v-html내의 스크립트 선언이 적용되지 않았다.
스크립트에서 반복문으로 이미지 엘리먼트를 생성해서 div에 append 시키는 방식이었다.
<script>
for(let i = 0; i< 20; i++) {
const image = document.createElement("img");
image.setAttribute("src", "${imageurl}");
${상위엘리먼트}.appendChild(image);
}
</script>소스상에 선언되어있는 div에 appendChild로 이미지를 붙여주려고 했으나 동작하지 않음.
solve 1-1)
스크립트가 미작동하는지 확인하기 위해 크롬 콘솔에서 확인해보니 정상적으로 엘리먼트가 생성되었고,
정상적으로 하위 엘리먼트로 생성되어 정상적으로 노출되었다.
그렇다면 스크립트상에는 이상이 없고 v-html에서 작동이 안된다는 결론에 이른다.
solve1 Note
조금만 생각해보면 안되는 이유를 바로 알 수 있었다.
vue가 화면을 그릴때 모든 스크립트가 스코프에 의해 상단에서 렌더링된다.
html 화면을 그리기전 스크립트가 먼저 실행되었고 div 요소가 없었으니 append가 안되었을거다.