사용자가 이미지를 보기로 스크롤할 때 이미지를 동적으로 로드하는 방법

사용자가 이미지를 보기로 스크롤할 때 이미지를 동적으로 로드하는 방법

저는 사용자가 볼 수 있는 뷰포트 영역 안으로 가져올 수 있을 정도로 페이지를 아래로 스크롤할 때만 폴더 아래의 이미지가 로드되는 수많은 "현대적인" 웹 사이트(예: 페이스북 및 구글 이미지 검색)에서 이러한 현상을 발견했습니다(보기 소스에서 페이지에는 X개의 태그가 표시되지만 서버에서 바로 가져올 수는 없습니다).이 기술은 무엇이라고 불리는지, 어떻게 작동하는지, 몇 개의 브라우저에서 작동하는지.그리고 최소한의 코딩으로 이 동작을 달성할 수 있는 jQuery 플러그인이 있습니까?

편집

보너스: "스크롤된" 항목이 있는지 누가 설명해 줄 수 있습니까?HTML 요소에 대한 "IntoView" 또는 유사한 이벤트.그렇지 않다면 이 플러그인은 어떻게 작동합니까?

여기 있는 답변 중 일부는 무한 페이지에 대한 것입니다.살만이 요구하는 것은 게으른 이미지 로딩입니다.

플러그인

데모

편집: 이 플러그인들은 어떻게 작동합니까?

이것은 간단한 설명입니다.

1. 창 크기를 찾고 모든 이미지의 위치와 크기를 찾습니다.
2. 이미지가 창 크기 내에 있지 않으면 크기가 같은 자리 표시자로 바꿉니다.
3. 사용자가 아래로 스크롤할 때, 영상의 위치 < 스크롤 + 윈도우 높이>가 로드됩니다.

(지금까지는) 잘 될 것 같은 기본적인 방법을 스스로 생각해 냈습니다.제가 미처 생각하지 못했던 인기 있는 대본 주소들이 십여 가지는 될 것입니다.

참고 - 이 솔루션은 빠르고 쉽게 구현할 수 있지만 성능에는 그다지 좋지 않습니다.성능이 문제라면 Apoorv가 언급하고 developers.google이 설명한 새로운 Intersection Observer를 꼭 살펴보십시오.

제이쿼리

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

샘플 html 코드

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

설명된

페이지를 스크롤하면 페이지의 각 이미지가 선택됩니다.

$(this).attr('data-src')- 이미지에 속성이 있는 경우data-src

그리고 그 이미지들이 창문 아래쪽에서 얼마나 멀리 떨어져 있는지..

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

원하는 대로 + 100을 조정합니다(- 100 예를 들어).

var source = $(this).data('src');- 값을 가져옵니다.data-src=일명 이미지 url

$(this).attr('src', source);- 그 가치를 에 담습니다.src=

$(this).removeAttr('data-src');- data-src 속성을 제거하여 브라우저가 이미 로드된 이미지를 엉망으로 만드는 리소스를 낭비하지 않도록 합니다.

기존 코드에 추가

html을 변환하려면 편집기에서 검색하고 바꾸기만 하면 됩니다.src="와 함께src="" data-src="

^{(편집: 끊어진 링크를 보관된 복사본으로 대체)}

AOL의 데이브 아츠(Dave Artz)는 지난해 보스턴 jQuery Conference에서 최적화에 대해 훌륭한 강연을 했습니다.AOL은 스크롤 위치를 기반으로 주문형 로딩을 위해 Sonar라는 도구를 사용합니다.스크롤 상단(및 기타)을 요소 오프셋과 비교하여 요소의 일부 또는 전부가 보이는지 감지하는 방법에 대한 세부 사항을 코드에서 확인합니다.

제이쿼리 소나

데이브는 이 슬라이드에서 소나에 대해 이야기합니다.Sonar는 슬라이드 46에서 시작하고 전체적인 "주문형 로드"에 대한 논의는 슬라이드 33에서 시작합니다.

여기에 꽤 멋진 무한 스크롤 플러그인이 있습니다.

제가 직접 프로그래밍을 해본 적은 없지만 이렇게 작동하는 것 같습니다.

1. 이벤트가 창 스크롤에 바인딩됨

   $(window).scroll(myInfinteScrollFunction);
   

2. 호출된 함수는 스크롤 상단이 윈도우 크기보다 큰지 확인합니다.

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }
   

3. AJAX 요청이 이루어지며, 시작할 결과 #, 잡을 수 및 데이터 풀에 필요한 다른 파라미터를 지정합니다.

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });
   

4. ajax는 일부(JSON 형식일 가능성이 높음) 콘텐츠를 반환하고 로드니그 함수에 전달합니다.

그게 말이 되기를 바랍니다.

이제 사용할 수 있습니다.loading="lazy"사용자가 해당 요소로 스크롤할 때까지 로딩이 지연되도록 이미지는 물론 iframe에도 표시됩니다.

<img src="http://placeimg.com/640/360/any" loading="lazy" />

MDN에 인용된 바와 같이:

Loading attribute 요소(또는 의 loading attribute)의 loading attribute를 사용하여 사용자가 화면 밖에 있는 이미지/아이프레임을 가까이 스크롤할 때까지 브라우저에 로드를 연기하도록 지시할 수 있습니다.

써도 돼요?

모든 최신 브라우저에서 이미지를 사용할 수 있지만, 프레임이 현재 실험적이라면 가능합니다.

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

.scroll-down {
  height: 100vh;
  background: #037ef3;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Oswald";
  font-size: 2em;
}

.image {
  padding: 2em;
  display: grid;
  place-items: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

<div class="scroll-down">
  Let me take this space so that you can scroll down
</div>
<div class="image">
  <img src="http://placeimg.com/640/360/any" loading="lazy" /> <!-- The only important part -->
</div>

팁:

데모에서 볼 수 있듯이 레이아웃 시프트를 만들어 스크롤하는 동안 잘못된 UX를 생성합니다.그러니 자리지킴이를 이용해 보세요.이와 비슷한 것: NextJS Placeholder

스크롤 이벤트에 청취자를 첨부하거나 setInterval을 사용하여 이미지를 느리게 로드하는 것은 브라우저가 전체 페이지를 다시 배치하도록 강요하고 웹 사이트에 상당한 ank를 제공하기 때문에 성능이 매우 떨어집니다.

IntersectionObserver를 사용하여 이미지를 지연 로드하는 Lozad.js(의존 관계 없이 569바이트만 사용)를 사용합니다.

이미지 게으른 로딩의 스위스 아미 나이프는 YUI의 ImageLoader입니다.

왜냐하면 이 문제는 단순히 스크롤 위치를 보는 것 이상의 것이 있기 때문입니다.

나를 위한 이 링크 작업 데모

1. jQuery loadScroll 플러그인을 jQuery library 다음에 클로징 바디 태그 이전에 로드합니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2.Html5 data-src 속성을 사용하여 웹페이지에 이미지를 추가합니다.일반 img의 src 속성을 사용하여 자리 표시자를 삽입할 수도 있습니다.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. img 태그의 플러그인을 호출하여 이미지가 표시될 때 페이드인 효과가 지속되는 기간을 지정합니다.

$('img').loadScroll(500); // in ms

저는 jQuery Lazy를 사용하고 있습니다.테스트하는 데 약 10분이 걸렸고 한 웹 사이트(CollegeCarePackages.com )의 대부분의 이미지 링크에 추가하는 데 한두 시간이 걸렸습니다.저는 개발자와 어떤 종류의 관계도 없습니다만, 많은 시간을 절약할 수 있었고 기본적으로 모바일 사용자의 바운스 속도를 향상시키는 데 도움이 되었으며 감사합니다.

언급URL : https://stackoverflow.com/questions/5117421/how-to-load-images-dynamically-or-lazily-when-users-scrolls-them-into-view