이미지로드

Question

내가 형식의 객체의 배열을 구성 요소와 같은 갤러리를 썼다 반작용에 지연 :

{ 
    ... 
    title: string, 
    url: string (the image url) 
    ... 
} 

갤러리는 당신이 배열을 반복 할 수있는 다음 버튼이 있습니다 제목과 같은 데이터를 표시하고 태그에 이미지를 표시합니다. 텍스트 필드가 즉시 표시되는 동안 img 태그는 조금 뒤떨어져 이전 이미지를 두 번째 또는 두 번째로 보여주고 다음을 보여줍니다.

어떻게 이런 생각을 할 수 있습니까? 아니면 적어도 첫 번째 이미지를 즉시 사라지게할까요?

Answer 1

복잡성과 우아함에 이르기까지 다양한 방법으로 해결할 수 있습니다. 내가 생각할 수있는 가장 간단한 방법은 src를 즉시로드 할 항목으로 변경 한 다음 새 img로 변경하는 것입니다. 코드에 포함 된 이미지와 같은 base64 투명 gif를 사용할 수 있습니다. - https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/