게시물 미리보기에 지연 로딩된 이미지를 포함하는 방법?

제품 지원
1

저희 블로그는 이미지 지연 로딩(lazy load)을 사용하고 있습니다. 이 방식에서는 이미지의 src가 HTML의 data-src 속성에 저장됩니다. 그래서 “전체 게시글 보기” 버튼을 사용할 때 이미지가 로드되지 않습니다. 이미지를 로드하도록 설정하는 방법이 있을까요?

일반적인 이미지 마크업(소스가 src에 배치됨)을 블로그 게시글에 사용하여 디스코스 포럼에서 이미지가 정상적으로 표시되는 예시:

지연 로딩을 사용하여 이미지가 표시되지 않는 예시:

2

확실하지는 않지만, 최근 브라우저 내장 인쇄 기능에도 동일한 제한 사항이 있다는 것을 알게 되었습니다. 아래까지 스크롤하여 이미지를 모두 로드하지 않으면, “PDF로 인쇄” 시 이미지가 빈 상태로 표시됩니다.

3

네, PDF로 인쇄할 때 그런 동작을 합니다. 브라우저가 렌더링한 최종 마크업과 인쇄용 CSS를 함께 사용하기 때문에 정상적인 동작이라고 추정합니다.

이 버튼에 어떤 파싱을 사용 중인지 모르겠네요 (오픈소스라는 건 알지만 저는 루비를 잘 몰라서요 :sweat_smile:). 아마 HTML 소스를 직접 파싱하는 것 같고, 그러면 커스텀 이미지 속성을 읽으려 하지 않을 가능성이 높습니다.

설정 옵션에 이미지 태그 내에서 이미지 소스에 사용할 지정된 커스텀 속성을 포함할 수 있는 기능을 추가하는 것을 제안합니다. (여러 가지 변형을 사용하고 있어, 모두 지원할 수 있으면 좋겠습니다.)