동적으로 이미지로드

Question

한 페이지에 다른 크기의 Image을 많이 표시해야합니다.

<div id="box1"> 
<span>Something About Image Goes Here</span> 
<img src="img1.jpg" id="img1" /> 
</div> 
<div id="box2"> 
<span>Something About Image Goes Here</span> 
<img src="img2.jpg" id="img2" /> 
</div> 
--- 
--- 
<div id="box30"> 
<span>Something About Image Goes Here</span> 
<img src="img30.jpg" id="img30" /> 
</div> 

마이 페이지 내가 같은 코드를 사용하는 경우 완전히로드 할 많은 시간이 걸릴 것입니다, 그래서 모든 이미지를 한 번에로드하지 않아야 만 Images within viewport (웹 페이지의 보이는 부분) 처음로드해야하며, 나머지는로드해야합니다 사용자가 스크롤 할 때

주
나는, 텍스트는 일반적으로 한 번에 표시되어야합니다 text (내가 코드에서 사용되는 이미지 정보)를 위해 그것을 돼요.
페이스 북에서 사용자가 아래로 스크롤하면 새로운 컨텐츠가로드되지만 여기서는 이미지 만 원합니다. 장식 된 div을 사용하고 스크롤 할 때 해당 이미지가 해당 div에 나타나야합니다. (나는 그림이로드 될 때까지 로딩 이미지를 추가하려고합니다.)

Answer 1

jQuery lazyload plugin을 사용할 수 있습니다.

지연로드는 JavaScript로 작성된 jQuery 플러그인입니다. 긴 웹 페이지에서 이미지를 로딩하는 것을 지연합니다. 뷰포트 외부의 이미지 (웹 페이지의 표시 부분 )는 사용자가 스크롤하기 전에로드되지 않습니다.