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

참고 -이 솔루션은 빠르고 쉽게 구현할 수 있지만 성능에는 좋지 않습니다. 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="