그래서 내 사이트에서 fotorama.io를 사용하고 있습니다. 슬라이더 (60-80)에 이미지가 큰 갤러리가있어서 수동으로 모든 이미지를로드하지 않기 위해 지연로드를 사용하는 방법을 제안했습니다.Fotorama 슬라이더 - 이미지를 지연로드하고 표시되지 않을 때 이미지를 언로드하는 방법?
그러나 이미지를 탐색하고 이미 40 개 이상의 이미지에 도달하면 브라우저 메모리가 과부하 상태가되어 브라우저가 천천히 응답하기 시작합니다. 메모리를 다시 시작하기위한 플러그인이 Firefox에 매우 높습니다.
게으른로드를 사용하고 예를 들어 10 개의 이미지를 유지하고 메모리를 지우도록 언로드 할 수있는 최대 10 개 이상의 이미지 또는 이미지를 모두 언로드 할 수 있습니까?
재미있는 질문입니다! 지금은 언로드 메모리에서 이미지를 언로 드할 수 없으므로 브라우저가 자동으로 관리해야한다고 생각합니다. 그건 그렇고, Fotorama 보이지 않는 이미지를 분리합니다. Аs 대형 갤러리의 경우 최상의 방법이라는 것을 알고 있습니다.
브라우저가 JavaScript로 제거 되더라도 이미지를로드합니다. 아래의 예에 사용 된 모든 이미지는 바로 다운로드됩니다 :
<div class="fotorama">
<img src="1.jpg">
<img src="2.jpg">
</div>
당신이, 아니 자바 스크립트와 브라우저에 대한 걱정 귀하의 HTML 변경하여 지연로드 켜지 않으면 :
<div class="fotorama">
<a href="1.jpg"></a>
<a href="2.jpg"></a>
</div>
썸네일을 추가하기 :
<div class="fotorama">
<a href="1.jpg" data-thumb="1_thumb.jpg"></a>
<a href="2.jpg" data-thumb="2_thumb.jpg"></a>
</div>
여기에서 모든 사진 작가는이 이미지 삽입 방법을 사용하고 있습니다.
img 태그를 게으른로드하려는 경우 폭과 높이를 넣으십시오.
예 :
<div class="fotorama" width="360" and height="360">
<img src="1.jpg">
<img src="2.jpg">
</div>
그리고 그 작품!
PS : 테스트 된 반응 형 웹 사이트 및 모든 브라우저.