[jdenticon 이슈] jQuery load메서드에서 아이콘이 나오지 않는 에러

 

비동기처리에서 jdenticon 아이콘이 나오지 않는 상황

 

 

이미지 로딩 실패

각 멤버마다 구별해주기 위한 이미지 아이콘으로 jdenticon을 사용했다. 로그인 id인 nickname을 값으로 이미지를 변환하도록 하였는데 프로젝트를 진행해가며 동기처리를 비동기로 바꾸면서 발생한 문제였다.

 

댓글등록시에는 html뷰를 하나를 따로 두고 값만 바뀐 페이지일부를 교체하는 형태로 구현했고,  댓글 수정과 삭제는 jQuery load메서드를 사용하여 비동기통신을 구현했다. 해당 에러는 jQuery load메서드를 사용할때에만 jdenticon의 이미지가 나오지 않는 상황이었다.

 

한달전쯤 해당 에러를 발견 하고 해결하기위해 이리저리 찾아보았지만 결국 포기하고, 다른 bug fix를 우선적으로 했었다. 결국 마지막으로 남은 이 친구들을 해결해야만 하는 상황이었는데, 구글링 실력도 하다보면 느는것인지 생각보다 금방 해결할 수 있었다.(사실 이전에 jdenticon, load메서드 관련 모든 블로그 글은 살펴본 상태라서 검색 범위를 좁힐 수 있었다..;)

 

오픈소스인 jdenticon을 github에서 검색하여 issue태그를 살펴보았다. 해결되어 closed되어있는 것들중에 낯이 익은게 있는데
'How to add new icons withdout refresh' 새로고침(동기)없이 icon을 어떻게 넣을수있냐(지금 안넣어진다)였다.

 

해당 링크를 타고 가보면 총 3가지의 솔루션이 있는데 3번째 방법을 따라했다. 우선 설명되어있는 것을 읽어보면 jdenticon은 svg나 canvas 태그에서 동적인 요청이와야 동작가능한데 '비'동적인 요청을 하고 있기때문에 jdenticon이 동작하지 않는다는 설명이다.

 

이 문제를 해결하기 위해선 동적으로 바꾸어야 하는데 아래와 코드를 ajax통신하는 부분에 넣어 같이 동작하도록 해주면 된다.

<script> window.jdenticon_config={replaceMode:"observe"};</script>

성공

사실 성능을 위해서 비동기통신을 한건데 member의 사진로딩은 매번 동기로 바꿔주어야 한다니 찝찝한 사실이긴 하지만..

해당방법으로 해결할 수 있음을 포스팅합니다.

 

(혹시 member를 구별할 수 있는 아이콘 구현방법이나 성능 향상을 할 수 있는 방법을 알고 계시 댓글 한번 남겨주시면 감사하겠습니다!)

 

 

jdenticon 홈페이지 공식문서링크

https://jdenticon.com/js-api/no-icons-rendered.html

Jdenticon doesn't render my icons - Jdenticon for JavaScript