프런트 엔드 이미지의 지연 로딩에 대한 기술 튜토리얼 공유

원래 어제 오후에 프론트엔드 이미지 로딩 지연에 대한 자세한 기술을 블로그에 쓸 예정이었는데, 오후에 회사 프로젝트에 문제가 생겨서 디버깅을 하게 되었습니다. 오늘 하루 종일 또 밖으로 뛰어다니다가 막 식사를 마치고 돌아오니 벌써 저녁이 되어서 빨리 보충하고 싶어서 구체적인 구현을 이해하지 못하는 많은 친구들이 있었습니다. 이 측면은 이전 경험에서 배울 수 있습니다.

웹사이트에서는 프런트 엔드 페이지의 사용자 경험이 매우 중요합니다. 사진이 많은 웹사이트를 방문할 때 우리는 종종 이런 느낌을 받습니다. : 내 컴퓨터 화면의 표시 영역에 표시된 사진은 항상 시간에 맞춰 새로 고쳐질 수 없습니다. 이로 인해 일부 사용자는 더 이상 기다리지 못하고 다른 웹사이트를 보기 위해 웹사이트를 닫게 됩니다. 이는 웹사이트에서 가장 보고 싶어하지 않는 경우가 많습니다. 그래서 이러한 상황에 대해 개발자들은 계속해서 열심히 노력하여 사진을 로드하는 방법을 신속하게 생각해 냈습니다. 가시 영역에 즉시 표시되지 않고 스크롤 막대를 통해 스크롤해야 하는 사진이 표시 영역으로 스크롤된 후 표시되도록 합니다. 이는 모든 이미지 리소스를 한 번에 로드하는 것보다 훨씬 낫습니다. , 이로 인해 이미지 새로 고침 속도가 느려지고 사용자 경험이 훨씬 좋아졌습니다.

그렇다면 이미지 지연 로딩 기술은 어떻게 구현되는 걸까요? 자세한 소개는 다음과 같습니다.

먼저 이미지를 3개의 열, 총 5개의 행으로 정의합니다.

부트스트랩의 레이아웃 기술(물론 이게 핵심은 아닙니다) 부탁드립니다. img 태그의 src를 살펴보세요. 처음에는 이미지의 특정 리소스 경로를 제공하지 않았지만 x-src 속성을 직접 정의했습니다. 이는 이미지의 리소스 경로입니다. 다음으로, 페이지가 로드되면 jquery를 사용하여(물론 기본 자바스크립트 코드를 사용할 수도 있습니다. 시간을 절약하기 위해 여기에 왔습니다) 각 img를 반복하고 각 이미지가 현재 표시되는 영역이 있으면 이미지를 표시합니다. 그렇지 않으면 나중에 처리합니다. 여기서는 세 가지 데이터를 알아야 합니다.

참고: 제가 쓴 내용은 이미지가 절반만 로드된다는 것입니다. 이미지가 브라우저의 가시 영역에 들어가므로 처음 세 개의 데이터는 개인 요구 사항에 따라 다릅니다. 이미지가 가시 영역에 들어가자마자 로드되어야 하는 경우에는 직접 무시할 수 있습니다. 세 번째 데이터!!!!

1: 브라우저는 보기 영역의 높이

2: 문서를 기준으로 한 이미지의 오프셋(여기서는 높이 오프셋만 필요합니다)

3: 이미지 요소 자체의 높이

이미지가 문서 오프셋을 기준으로 먼저 + 이미지 요소 자체 높이의 절반인 경우 < , 이는 이미지의 절반이 가시 영역에 들어갔다는 의미입니다. 그러면 이 이미지가 들어와서 로드해야 하지만 img 태그의 src가 비어 있고 x-src 값이 이미지의 리소스 경로입니다. 이때 이미지를 로드하려면 jquery를 사용하여 img 태그의 x-src 값을 src에 전달해야 합니다. 특히 구현 코드는 다음과 같습니다.

구체적인 효과는 다음과 같습니다.

콘솔을 사용할 수 있습니다. 5행의 이미지가 있지만 각 행에는 3개의 열이 있습니다. 이미지의 첫 번째 열만 로드되고(이미지 높이가 img의 절반을 초과하는 경우에만 이미지 리소스가 로드됨) 이렇게 하면 그림 새로 고침 효과가 빠르게 나타납니다. 더 많은 사진을 보려면 스크롤 막대를 아래로 스크롤해야 합니다. 이때 위의 세 가지 외에 현재 스크롤 막대 스크롤 거리도 알아야 합니다. if:

문서에 대한 이미지 오프셋 + 이미지 요소 자체 높이의 절반 < 브라우저의 표시 영역 높이 + 현재 스크롤 막대의 스크롤 거리는 현재 그림이 이미 보이는 영역 내에 있고 그림 높이의 절반 이상이 보이는 영역 안에 있는 경우 그림을 로드합니다. 구체적인 코드는 다음과 같습니다.

구체적인 효과는 다음과 같습니다.

스크롤바가 스크롤됨에 따라 로드된 그림이 원래 3개에서 현재 6개로 변경되고 스크롤바가 계속 움직이는 것을 콘솔에서 볼 수 있습니다. 아래로 스크롤하면 사진이 계속 로드되어 더 나은 사용자 경험을 제공합니다.

이미지 지연 로딩의 구체적인 구현입니다. 구체적인 구현 효과를 직접 보고 싶다면 이미지가 멋지다고 생각하시나요?

[관련 추천]

1. 무료 HTML 온라인 동영상 튜토리얼

html 개발 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

위 내용은 프런트 엔드 이미지의 지연 로딩에 대한 기술 튜토리얼 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!