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

Question 1

나는 많은 "현대"웹 사이트 (예 : facebook 및 google 이미지 검색)에서 사용자가 볼 수있는 뷰포트 영역으로 가져올 수있을만큼 충분히 페이지를 아래로 스크롤 할 때만 접힌 부분 아래의 이미지가로드되는 것을 발견했습니다 ( 소스보기에서 페이지에 X 개의 <img>태그가 있지만 서버에서 바로 가져 오지는 않습니다 ). 이 기술은 무엇이며 어떻게 작동하며 얼마나 많은 브라우저에서 작동합니까? 그리고 최소한의 코딩으로이 동작을 달성 할 수있는 jQuery 플러그인이 있습니다.

편집하다

보너스 : 누군가가 HTML 요소에 대해 "onScrolledIntoView"또는 유사한 이벤트가 있는지 설명 할 수 있습니다. 그렇지 않은 경우 이러한 플러그인은 어떻게 작동합니까?

Question 2

여기에 일부 답변은 무한 페이지에 대한 것입니다. Salman이 요구하는 것은 이미지의 지연 로딩입니다.

플러그인

데모

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

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

창 크기를 찾고 모든 이미지의 위치와 크기를 찾습니다.
이미지가 창 크기에 맞지 않으면 같은 크기의 자리 표시 자로 바꿉니다.
사용자가 아래로 스크롤하고 이미지의 위치 <scroll + window height, 이미지가로드됩니다.

Question 3

AOL의 Dave Artz는 작년에 jQuery Conference Boston에서 최적화에 대한 훌륭한 강연을했습니다. AOL은 스크롤 위치를 기반으로 온 디맨드 로딩을 위해 Sonar라는 도구를 사용합니다. scrollTop (및 기타)을 요소 오프셋과 비교하여 요소의 일부 또는 전체가 표시되는지 여부를 감지하는 방법에 대한 코드를 확인하십시오.

jQuery Sonar

Dave는 이 슬라이드 에서 Sonar에 대해 설명 합니다. Sonar는 슬라이드 46에서 시작하고 전반적인 "요청시로드"논의는 슬라이드 33에서 시작합니다.

Question 4

나는 (지금까지) 잘 작동하는 것처럼 보이는 내 자신의 기본 방법을 생각해 냈습니다. 내가 생각하지 못했던 인기있는 스크립트가 다룬 내용이 열두 가지있을 것입니다.

참고 -이 솔루션은 빠르고 쉽게 구현할 수 있지만 성능에는 좋지 않습니다. Apoorv가 언급하고 성능이 문제인 경우 developers.google에서 설명한 대로 새로운 교차점 관찰자 를 확실히 살펴보십시오 .

JQuery

$(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="

Question 5

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

나는 직접 프로그래밍 한 적이 없지만 이것이 어떻게 작동하는지 상상할 것입니다.

이벤트가 창 스크롤에 바인딩됩니다.
```
$(window).scroll(myInfinteScrollFunction);
```

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

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

AJAX 요청이 이루어지며, 시작할 결과 #, 가져올 수 및 데이터 풀에 필요한 기타 매개 변수를 지정합니다.

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

ajax는 일부 (가장 JSON 형식으로 된) 콘텐츠를 반환하고이를 loadnig 함수에 전달합니다.

이해가 되길 바랍니다.

Question 6

리스너를 스크롤 이벤트에 연결하거나 setInterval을 사용하여 이미지를 지연로드하는 것은 getBoundingClientRect ()를 호출 할 때마다 브라우저가 전체 페이지 를 다시 레이아웃 하도록하고 웹 사이트에 상당한 버벅 거림을 유발하므로 성능이 매우 떨어집니다.

사용 Lozad.js 사용 (종속물 단지 569 바이트), IntersectionObserver을 performantly 게으른로드 이미지.

Question 7

이미지 지연 로딩의 스위스 군용 칼은 YUI의 ImageLoader입니다. 입니다.

이 문제에는 단순히 스크롤 위치를 보는 것보다 더 많은 것이 있기 때문입니다.

Question 8

이 링크는 나를 위해 작동합니다. 데모

1. jQuery 라이브러리 뒤, 닫는 body 태그 앞에 jQuery loadScroll 플러그인을로드합니다.

<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

Question 9

사용 임 jQuery를 게으른을 . 테스트하는 데 약 10 분, 내 웹 사이트 중 하나 ( CollegeCarePackages.com ) 에있는 대부분의 이미지 링크에 추가하는 데 한두 시간이 걸렸습니다 . 저는 개발자와 어떤 종류의 관계가 없지만 (없음 / 0) 많은 시간을 절약하고 기본적으로 모바일 사용자의 이탈률을 개선하는 데 도움이되었고 감사합니다.