브라우저의 보이는 부분에 들어가면 이미지가 로드됩니까?

브라우저의 보이는 부분에 들어가면 이미지가 로드됩니까?

문 닫았습니다.이 질문은 충족되지 않습니다.스택 오버플로 지침.현재 답변을 받지 않고 있습니다.

---

도구, 라이브러리 또는 선호하는 오프사이트 리소스를 추천하거나 찾으라는 질문은 의견이 많은 답변과 스팸을 끌어들이는 경향이 있기 때문에 스택 오버플로에서는 주제가 다릅니다.대신, 문제와 그것을 해결하기 위해 지금까지 무엇을 했는지 설명하세요.

9년전에 문을 닫았습니다.

이 질문을 개선합니다.

인터넷을 둘러보다가 처음 보는 것을 보았습니다.이 사이트에서: http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/

페이지 아래로 이동하면 브라우저의 보이는 부분에 이미지가 있을 때만 이미지가 로드됩니다.저는 이것을 전에 본 적이 없고 다른 사람이 있는지 그리고 정확히 어떻게 하는지 궁금했습니다.

이것이 워드프레스 플러그인의 일종인 것 같은데(그가 사용하는 것입니다) 잘 모르겠습니다.자바스크립트인가요?페이지 로드에 실제로 로드되지만 "스내지" 효과를 위해 나중에 볼 수 있게 되는 것입니까? 아니면 페이지 로드 시간을 더 빠르게 하는 데 실제로 유용합니까?

"wp-content/플러그인/jquery-image-lazy 로드"

Lazy loader는 자바스크립트로 작성된 jQuery 플러그인입니다.웹 페이지의 이미지 로드를 지연시킵니다.뷰포트(웹 페이지의 보이는 부분) 밖의 이미지는 사용자가 스크롤하기 전에 로드되지 않습니다.이미지 프리로딩과는 반대입니다.

대용량 이미지가 많이 포함된 긴 웹 페이지에서 게으른 로드를 사용하면 페이지 로드 속도가 빨라집니다.보이는 이미지를 로드한 후 브라우저가 준비 상태가 됩니다.경우에 따라서는 서버 부하를 줄이는 데도 도움이 될 수 있습니다.

http://www.appelsiini.net/projects/lazyload

따라서 지정된 모든 이미지 또는 요소의 컨텍스트 내부를 통과하여 이미지가 완전히 로드되기 전에 src를 자리 표시자 gif로 대체하고 원래 URI를 저장하며 이미지가 "보이는" 경우 자리 표시자를 실제 이미지로 대체합니다.

웹사이트에 의하면 LazyLoad는 더 이상 사용할 수 없습니다.코드가 새 브라우저에서 더 이상 작동하지 않으며 작성자는 업데이트할 시간이 없습니다.

저는 "출연" 플러그인이 잘 작동하고 있습니다.

http://plugins.jquery.com/appear/

요소에 대한 콜백 함수를 지정할 수 있습니다.요소가 보기에 나타나면 콜백 함수가 호출됩니다.사이트에서:

$('#foo').appear(function() {
  $(this).text('Hello world');
});

참조한 페이지의 출처를 살펴보면 다음과 같은 코드가 포함되어 있습니다.

jQuery(document).ready(function($){
  jQuery(".SC img").lazyload({
    effect:"fadeIn",
    placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
  });
});

그런 식으로 효과를 거두고 있는 것 같습니다.jQuery LazyLoad 플러그인을 사용하며, 여기에서 확인할 수 있습니다.

http://www.appelsiini.net/projects/lazyload

Sanjay가 지적한 대로 Applesiini의 jQuery LazyLoad 플러그인은 더 이상 작동하지 않습니다.여기 제가 찾은 또 다른 jQuery 플러그인이 있습니다.jQuery Appares외에 또 다른 옵션이 있습니다.

http://plugins.jquery.com/project/LazyLoadOnScroll

http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/

언급URL : https://stackoverflow.com/questions/1736215/make-images-load-when-they-enter-visible-section-of-browser