jquery에서 이미지를 비동기적으로 로드하는 방법

프론트 엔드 개발에서 사진은 일반적으로 사용되는 콘텐츠 중 하나입니다. 그러나 사진 수가 많은 일부 페이지의 경우 한꺼번에 로드하면 페이지 응답이 느려지고 사용자 경험이 저하될 수 있습니다. 페이지 성능을 최적화하려면 기술을 사용해야 합니다. jQuery는 이미지를 비동기적으로 로드하는 편리한 방법을 제공하는 뛰어난 JavaScript 라이브러리입니다.

다음은 jQuery에서 이미지를 비동기적으로 로드하는 방법을 소개합니다.

1. 이미지 지연 로딩

지연 로딩은 사용자가 보이는 영역으로 스크롤할 때만 이미지를 로딩하는 것을 의미합니다. 이 기술은 페이지 로딩 성능을 최적화하고 사용자 경험을 향상시킬 수 있습니다.

jQuery에서 지연 로딩을 구현하려면 지연 로드 플러그인을 사용할 수 있습니다. 이는 너무 많은 코드가 필요하지 않은 경량 플러그인입니다. 지연 로드해야 하는 이미지에 지정된 클래스를 추가한 다음 플러그인 메소드를 호출하기만 하면 됩니다.

단계는 다음과 같습니다.

1 지연 로드 플러그인을 다운로드하고 jQuery 라이브러리를 도입합니다.

2. 아래와 같이 HTML에서 지연 로드해야 하는 이미지에 클래스 속성을 추가합니다.

<img class="lazyload" data-src="image.png">

3. JavaScript에서 지연 로드해야 하는 이미지의 클래스를 지정합니다.

$(function(){
    $("img.lazyload").lazyload();
});

이미지의 실제 주소는 src 속성이 아닌 data-src 속성에 지정해야 한다는 점에 유의하세요. 이렇게 하면 원본 이미지 주소가 즉시 로드되지 않고 필요할 때 로드됩니다.

2. 이미지 미리 로드

미리 로드한다는 것은 필요한 경우 네트워크 요청 없이 캐시된 이미지를 직접 사용하는 것을 의미합니다. 이 기술은 페이지 표시 속도와 사용자 경험을 향상시킬 수 있습니다.

jQuery에서 이미지를 미리 로드하려면 preload 메서드를 사용할 수 있습니다. 코드는 다음과 같습니다.

$.preload = function(){
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
        $("<img>").attr("src", arguments[i]);
    }
}

이 메서드는 여러 이미지 주소를 매개 변수로 받은 다음 jQuery를 사용하여 img 태그를 동적으로 생성하고 src 속성을 미리 로드해야 하는 이미지 주소입니다. 이러한 방식으로 이러한 이미지를 표시해야 할 때 네트워크 요청 없이 로컬 캐시에서 직접 가져올 수 있습니다.

페이지가 로드될 때 이 메서드를 호출할 수 있습니다. 예:

$.preload("image1.png", "image2.png", "image3.png");

이미지를 미리 로드하는 효과는 분명하지 않지만 네트워크 상태가 좋지 않을 때 이미지 표시 속도를 효과적으로 높일 수 있습니다.

3. 이미지 지연 로드

지연 로드는 페이지가 로드된 후 일부 필수 이미지를 비동기적으로 로드하는 것입니다. 이 기술을 사용하면 모든 첫 화면 이미지가 로드되어 페이지가 느리게 로드되는 것을 방지할 수 있습니다.

jQuery에서 지연 로딩을 구현하려면 지연 로딩과 사전 로딩이라는 두 가지 기술을 결합하여 지연 로딩과 유사한 효과를 얻을 수 있습니다.

지연 로딩은 페이지가 로드된 후 이미지의 비동기 로딩이 필요하기 때문에 지연 로딩보다 덜 효과적이라는 점에 유의해야 합니다.

요약

이미지의 비동기 로딩은 페이지 로딩 성능을 효과적으로 최적화하고 사용자 경험을 향상시킬 수 있습니다. jQuery에서 이미지의 비동기 로딩을 구현하려면 지연 로딩, 사전 로딩, 지연 로딩이라는 세 가지 기술을 사용할 수 있습니다. 이러한 기술은 다양한 시나리오에서 장점을 갖습니다.

지연 로딩은 한 번에 너무 많은 이미지를 로드하여 페이지 응답이 느려지는 것을 방지하고 페이지 표시 속도와 사용자 경험을 향상시킵니다. 미리 로드하면 이미지 표시 속도가 빨라지고 네트워크 요청으로 인한 대기 시간을 피할 수 있습니다. 지연된 로드는 지연 로드와 사전 로드의 장점을 결합할 수 있으며, 모든 첫 화면 이미지 로드로 인해 발생하는 페이지 응답 속도 저하를 방지하기 위해 페이지가 로드된 후 이미지를 비동기적으로 로드할 수 있습니다.

위 내용은 jquery에서 이미지를 비동기적으로 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!