반응 레이아웃을위한 이미지 지연로드?

Question

나는, 그런

• http://www.appelsiini.net/projects/lazyload
• http://luis-almeida.github.io/unveil/
을 사용하면 이미지의 폭과 높이를 지정하는 것이 아니라 우리의 사이트로 반응 레이아웃을 사용하고 필요
같은 libs와 볼을 100 %로 설정 이미지의 폭을 즉 CSS를 통해 지연로드를 수행 할 수 있습니까? (위의 두 라이브러리를 사용해 보았는데 작동하지 않습니다.)

응답 레이아웃을 위해 지연 이미지로드를 수행하는 권장 방법은 무엇입니까?

Answer 1

justlazy 라이브러리를 사용해 볼 수 있습니다. 이미지를로드하기 전에 img 태그를 제공 할 필요가 없습니다. 당신이 볼 수 있듯이 그냥 또한 "반응"srcset 속성 (프로젝트 페이지에 데모 참조) 지원됩니다 : 예컨대, 이미지를로드하기 전에

<span data-src="default/image" data-alt="some alt text" 
 
     data-srcset="small/image 600w, big/image 1000w" 
 
     class="justlazy-placeholder"> 
 
</span>

을 원하는 자리 표시자를 정의합니다. 그런 다음 로딩 이벤트를 등록하십시오. 당신은 당신이 더 많은 유연성을 필요로하는 경우

Justlazy.registerLazyLoadByClass("justlazy-placeholder");

:, 스크롤을 통해 예컨대을로드 할 경우, 수동으로 게으른 로딩을 시작하는 기능도 있습니다.