콘텐츠 로딩이 지연됩니다. 이미지 로딩이 지연됩니다. B-게으른 플러그인. 지연 로딩을 사용하고 있나요?
웹사이트 운영에서 중요한 부분은 사용자 브라우저에 로드되는 속도입니다. 규칙은 단 하나뿐입니다. 빠를수록 좋습니다. 프로젝트를 최적화하는 것이 항상 가능한 것은 아니며, 여기서 우리를 구해줄 몇 가지 트릭이 있습니다. 오늘 우리는 사이트의 이미지 "지연 로딩"에 대해 이야기하고 jQuery 플러그인 Lazy Load를 사용할 것입니다.
Lazy Load의 작동 방식에 대한 가장 분명하고 좋은 예는 소셜 네트워크의 피드입니다. 원리 자체는 간단합니다. 사용자가 페이지를 스크롤할 때 이미지를 점진적으로 로드하는 것입니다. 약간의 이론으로 들어가면 HTML 페이지를 열면 두 단계로 로드됩니다. 먼저 문서의 구조가 로드되고, 두 번째로 포함된 파일(이 경우 그림)이 로드됩니다. 지연 로드는 data:image;base64 를 통해 이미지를 생성하여 이미지 대신 최소한의 가중치로 더미 이미지를 삽입하고, 스크롤할 때 이미 기본 미디어 콘텐츠를 로드합니다. 이렇게 하면 페이지 로드 시간이 줄어들어 매우 좋습니다!
소스
1단계. HTML이제 스크립트를 연결하는 것부터 시작해 보겠습니다.
페이지에 이미지를 추가해 보겠습니다.
마크업을 추가할 때 너비와 높이 속성을 지정하는 것이 중요합니다. 그렇지 않으면 스크립트가 작동하지 않거나 이미지 스타일에 너비와 높이가 지정됩니다.
2단계. JS이제 HTML 문서를 로드한 후 새 메서드를 호출합니다.
$("img.lazyImg").lazyload((
효과: "페이드인"
});
});
플러그인에는 몇 가지 유용한 설정이 있습니다.
- 이벤트 - 이미지 로드를 시작하는 이벤트(클릭 또는 스크롤)입니다.
- 효과 - 애니메이션 표시(표시 또는 페이드인)
- 컨테이너 - 이미지를 검색할 컨테이너를 지정합니다.
- 자리 표시자 - 이 매개변수에 자신만의 자리 표시자를 설정할 수 있습니다.
필요하지 않을 때 페이지의 모든 콘텐츠 로드를 거부하는 것입니다. 이는 데이터가 로드되지 않았지만 필요한 경우 로드해야 함을 나타내는 마커를 적용합니다.
지연 로딩을 사용하면 사이트의 이미지와 기타 자료가 비동기적으로 로드됩니다. 보다 구체적으로 말하면 웹 페이지의 보이는 부분이 완전히 로드된 후 또는 브라우저 창의 보이는 부분이 표시될 때만 독점적으로 로드됩니다. 예를 들어 방문자가 페이지 끝까지 스크롤하지 않으면 하단에 있는 이미지가 로드되지 않습니다.
지연 로딩은 많은 리소스, 특히 그림이 많은 리소스와 관련이 있습니다. 고해상도 사진이 있는 온라인 서비스를 방문하여 사이트가 어떻게 화면에 보이는 사진만 로드하는지, 아래로 스크롤하면 새 사진이 화면에 나타나는 즉시 로드되기 시작하는지 확인하세요. 스크롤하면 자리 표시자가 고해상도 이미지로 대체됩니다.
페이지의 특정 부분이 모든 사람에게 표시되지 않지만 이를 처리하거나 자료를 전송하는 데 엄청난 양의 리소스가 소비되는 경우가 종종 있습니다. 이때는 숨겨진 요소를 보거나 사용해야 할 때까지 생성 및 로드되는 것을 방지하는 지연 로딩에 대해 생각해 볼 때입니다.
메모에. 지연 로딩은 에 의해 활성화되며 에 의해 모니터링되는 이벤트에 의해 생성됩니다. 따라서 비동기 로딩을 사용하기 전에 JS가 없는 사용자는 해당 기능을 사용할 수 없으며 검색 엔진 로봇은 스크립트에 의해 숨겨진 콘텐츠를 볼 수 없다는 점을 고려하는 것이 중요합니다.
이제 지연 로딩을 선택해야 하는 두 가지 이유에 대해 이야기해 보겠습니다.
위의 내용을 바탕으로 지연 로딩이 웹 사이트 성능을 크게 향상시킨다는 결론을 내릴 수 있습니다.
지연 로딩의 유형사이트 성능을 향상하려면 이미지와 콘텐츠에 대한 지연 로딩 스크립트를 만들어야 합니다. 이를 수행하는 방법에는 여러 가지 옵션이 있습니다.
5가지 이미지 지연 로딩 옵션이미지에 대한 가장 일반적이고 이미 만들어진 지연 로딩 솔루션에 대해 이야기해 보겠습니다.
단순화된 버전에서 이 지연 로딩 스크립트는 img 태그의 src 속성을 data-src로 대체합니다.
data-src 속성을 포함하는 img 요소는 . 이미지가 로드된 후 전환을 사용하여 원활하게 표시됩니다.
Img(불투명도: 1; 전환: 불투명도 0.3s; ) img(불투명도: 0; )
그런 다음 JavaScript는 src 속성을 모든 img 태그에 전달하고 궁극적으로 data-src 속성의 값을 받습니다. 모든 이미지가 로드된 후 img에서 data-src가 제거됩니다.
ForEach.call(document.querySelectorAll("img"), function(img) ( img.setAttribute("src", img.getAttribute("data-src")); img.onload = function() ( img.removeAttribute( "데이터-src"); ); ));
David Walsh는 또한 효율적이고 구현하기 쉬운 JavaScript 실패 시 대체 기능을 제공했습니다. 그러나 해당 기능은 웹 페이지를 스크롤할 때 로드를 허용하지 않습니다. 이는 방문자가 이미지에 "도달"했는지 여부에 관계없이 브라우저가 모든 이미지를 로드한다는 것을 의미합니다. 예, 이미지가 HTML 다음에 로드되기 때문에 폴백을 사용하면 페이지를 더 빠르게 표시할 수 있지만 트래픽이 절약되지는 않습니다.
이 기술에는 표준 CSS 및 HTML에 대한 개선 사항으로 JS를 사용하는 지연 로딩이 포함됩니다. 점진적인 향상을 통해 이미지 표시를 담당하는 JavaScript가 비활성화되거나 스크립트 작동을 차단하는 오류가 나타나는 경우에도 이미지가 사용자에게 표시됩니다.
점진적인 향상에는 다음과 같은 여러 가지 이점이 있습니다.
오스본 솔루션에 대한 자세한 정보를 확인하실 수 있습니다.
3번. 간단한 JS를 사용하는 bLazy.js 플러그인이 스크립트는 가볍고 비동기 로딩을 수행하며 트래픽과 서버 요청을 절약하기 위해 여러 이미지와 함께 작동합니다. 그 사용은 다음을 제공합니다:
표준 구현. 마크업:
img 태그를 변경해야 합니다.
JavaScript: 표준 bLazy 호출을 지정하고 옵션 맵을 사용하여 객체를 구성합니다.
Var bLazy = new Blazy(( //옵션 ));
4번. 지연 로드 XT jQuery 플러그인자신만의 지연 로딩 스크립트를 편리하게 작성하기 위한 훌륭한 플러그인입니다. 비동기 로딩을 통해 src 속성이 포함된 비디오, iframe 및 기타 태그를 로드할 수 있는 jQuery 플러그인의 전체 버전이 있으며, 단순 지연 로딩 전용의 단순화된 버전이 있습니다.
사이트에서 플러그인을 사용하려면 닫는 태그 앞에 jQuery 라이브러리를 추가하고 jquery.lazyloadxt.js(단순 버전) 또는 jquery.lazyloadxt.extra.js(확장 버전)를 지정해야 합니다.
전체 플러그인을 사용하지 않도록 하는 대체 옵션인 경량 jqlight.lazyloadxt.min.js 스크립트도 있습니다.
이미지에서 src를 data-src 속성으로 바꿉니다.
플러그인은 자동으로 활성화될 수도 있고 직접 활성화할 수도 있습니다. 이렇게 하려면 다음을 입력하면 됩니다.
$(요소).lazyLoadXT();
Lazy Load XT jQuetry는 수많은 애드온을 추가합니다. 예:
기술의 장점:
이 링크를 사용하면 모든 애드온과 옵션을 볼 수 있습니다.
5호. 흐릿한 이미지 - Craig Buckler일부 웹사이트에서 처음에는 기사의 기본 이미지가 흐릿하다가 나중에는 선명한 고품질 이미지가 로드되는 것을 본 적이 있을 것입니다. 흐림 효과 방법을 사용하여 사진을 업로드하는 데는 여러 가지 옵션이 있습니다. 최고 중 하나는 Craig Buckler입니다.
이 기술의 장점은 다음과 같습니다.
GitHub 사이트 리포지토리에서 코드를 다운로드할 수 있습니다.
먼저 jQuery 라이브러리를 포함해야 합니다.
이 방법의 핵심은 AJAX를 사용하여 왼쪽 파일에서 필요한 div 요소를 대상 페이지로 로드하는 것입니다.
포트폴리오 
자세히보기...
모든 것이 매우 간단하고 명확합니다. 하지만 id=”smartPortfolio”인 div는 타사 문서의 콘텐츠 로드를 담당하는 가장 중요한 스크립트에 있으므로 주의해야 합니다. 포트폴리오의 "컨테이너"는 SmartPortfolio입니다. MoreButton – 클릭하면 다른 포트폴리오 조각을 로드하는 버튼입니다. LoadingDiv – 포트폴리오가 완전히 열렸거나 오류가 발생한 경우 텍스트가 표시되는 페이지의 일부입니다.
예를 들어, 이 기사를 읽는 많은 사람들은 스크립트를 서버에 업로드하는 대신 브라우저의 인덱스 파일을 통해 테스트할 것입니다. 오류 알림을 받게 됩니다. 또한 인터넷 연결이 약한 경우 파일을 다운로드하는 데 시간이 더 오래 걸립니다. 따라서 사용자에게 다운로드가 진행 중임을 알리는 메시지를 쓰거나 그림을 삽입하는 것이 중요합니다.
다음은 스크립트 자체입니다. 연결하려면 닫는 body 태그 앞에 코드를 삽입해야 합니다.
Var 지연로드 = 지연로드 || (); (function($,lazyload) ( "엄격한 사용"; var page = 2,buttonId = "#moreButton", loadingId = "#loadingDiv", 컨테이너 = "#smartPortfolio";lazyload.load = function() ( var url = "./pages/" + 페이지 + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, 성공: function(response) ( if ( !response || response.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("포트폴리오가 완전히 로드됨"); return; )appendContests(response); ), 오류 : function(response) ( $(loadingId).text("죄송합니다. 요청에 오류가 발생했습니다. 페이지를 새로 고치십시오."); ) )); varappendContests = function(response) ( var id = $(buttonId ); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); 페이지 += 1; ); ))(jQuery, 지연 로드) ;
웹 리소스의 구조에서 클릭할 때 데이터를 가져오는 페이지는 페이지 폴더에 있습니다. 3개의 파일이 포함되어 있으며 마지막 파일은 비어 있습니다. 이는 스크립트 논리에 의해 제공됩니다. 그 경로는 다음과 같습니다.
Var url = "./pages/" + 페이지 + ".html";
하지만 다른 경로를 사용할 때는 스크립트 자체에서 이를 바꾸는 것이 중요합니다. 다른 ID를 사용한 경우에도 동일한 작업을 수행해야 합니다.
ButtonId = "#moreButton", loadingId = "#loadingDiv", 컨테이너 = "#smartPortfolio";
이미지는 HTML 태그를 통해 두 가지 주요 방법으로 페이지에 로드됩니다. CSS 속성 background-image 를 사용합니다. 그럼 먼저 태그 예시를 살펴보고 이어서 CSS 배경 이미지를 살펴보겠습니다.
페이지에 이미지를 삽입하기 위한 간단한 HTML 마크업부터 시작해 보겠습니다.
지연 로드된 이미지의 마크업은 거의 동일합니다.
두 번째 단계는 이미지를 조기에 로드하지 않는 것입니다. 브라우저는 img 태그의 src 속성을 사용하여 이미지 로드를 트리거합니다. 그리고 이 이미지가 첫 번째인지, 천 번째인지는 중요하지 않습니다. 브라우저가 마크업에서 src 속성을 찾으면 범위를 벗어나더라도 즉시 이미지 로드를 시작합니다.
이미지 로딩을 지연하려면 src 속성이 아닌 다른 속성(예: data-src)에 이미지의 URL을 배치해야 합니다. 그리고 src 속성이 비어 있으므로 브라우저는 이 이미지를 로드하지 않습니다.
이제 이미지가 즉시 로드되는 것을 방지했으므로 이미지를 로드해야 하는 시기를 브라우저에 알릴 수 있는 방법이 필요합니다. 그렇지 않으면 결코 일어나지 않을 것입니다. 이를 위해 이미지(이 경우 자리 표시자는 회색 직사각형임)가 가시 영역에 있는지 확인한 다음 로드합니다.
이미지가 범위 내에 있는지 확인하는 방법에는 두 가지가 있습니다. 코드를 통해 각 예제를 살펴보겠습니다.
첫 번째 방법. JavaScript 이벤트를 사용하여 이미지 로드 트리거
이 메서드는 스크롤, 크기 조정 및 방향 변경 이벤트에 대한 핸들러를 사용합니다. 스크롤 이벤트는 사용자가 스크롤하여 페이지를 지나갈 때 페이지에서 사용자의 현재 위치를 결정합니다. 크기 조정 및 방향 변경 이벤트도 똑같이 중요합니다. resize 이벤트는 브라우저 창의 크기가 조정될 때 발생하고, 장치 방향이 가로 모드에서 세로 모드로 변경되었다가 다시 돌아오면 OrientationChange 이벤트가 발생합니다.
이 세 가지 이벤트를 사용하여 화면 변화를 감지하고 화면에 표시되어야 하는 이미지 수를 계산합니다. 이 모든 후에 우리는 그것들을 업로드할 것입니다.
이러한 이벤트가 발생하면 페이지에서 아직 로드되지 않은 모든 이미지를 찾습니다. 이 이미지 중에서 우리는 브라우저의 가시 영역에 있는 이미지를 정확하게 선택합니다. 이미지의 상단 오프셋, 문서의 현재 상단 위치 및 창 높이의 계산을 기반으로 선택이 이루어집니다. 따라서 이미지가 뷰포트에 나타나면 data-src 속성에서 해당 URL을 선택하고 이를 src 속성으로 옮긴 다음 브라우저가 이미지를 로드합니다.
우리는 게으른 클래스가 있는 모든 이미지를 선택하기 위해 JavaScript를 사용하고 있습니다. 이미지가 로드되면 더 이상 이벤트를 실행할 필요가 없으므로 이 클래스를 제거합니다. 모든 이미지가 로드되면 모든 이벤트 핸들러를 제거합니다.
페이지를 되감으면 스크롤 이벤트가 여러 번 발생한다는 점을 잊지 마세요. 따라서 성능을 향상시키기 위해 지연 로딩의 실행을 규제하는 작은 시간 제한을 스크립트에 추가하여 브라우저의 동일한 스레드에서 실행되는 다른 작업을 차단하지 않습니다.
다음은 이 접근 방식의 실제 예입니다.
따라서 이 글에서는 이미지를 지연 로딩하는 첫 번째 방법을 논의했고, 다음 글에서는 또 다른 방법을 논의할 것입니다.
좋은 웹사이트는 빠르게 로드되어야 합니다. 웹사이트를 만들 때와 기존 웹사이트를 분석하고 최적화할 때 이 점을 고려해야 합니다. 인터넷 프로젝트의 페이지를 로드할 때 방문자는 너무 오래 기다리는 것을 좋아하지 않습니다.
이 기사에서는 Javascript의 "이미지 지연 로딩"을 사용하여 사이트 로딩을 "가속화"하는 방법에 대해 설명하고 잘 알려진 프레임워크인 mootools 및 jQuery에 대한 구현 예를 제공합니다. 특히 고품질 이미지를 사용하는 사이트(뉴스 포털, 사진, 디자인, 클립아트 전문 사이트, 소셜 네트워크, 방대한 블로그 등)의 경우 더욱 그렇습니다.
mootools, jQuery를 사용하여 자바스크립트를 사용한 이미지 지연 로딩이미지를 로드할 때 어떤 문제가 기다리고 있나요? 이미지를 정상적으로 로드할 때 깨지거나 누락된 이미지가 있거나 이미지가 다른 소스에서 로드되거나 이미지가 "너무 느리게" 로드되는 경우 사이트가 정지됩니다.
현재 이미지를 수신하거나 분 제한 시간이 만료될 때까지 로드가 계속되지 않습니다. 방문자는 무엇을 봅니까? 종종 아무것도 없고 흰색 화면만 있거나 사이트의 단편적인 부분만 나타납니다. 그는 사이트의 그러한 "속임수"를 용인하고 다시 돌아올 것입니까?
이미지의 지연 로딩을 사용하면 이를 방지할 수 있습니다. 동시에 "지연 로딩" 방법을 사용하는 이미지는 사이트의 주요 콘텐츠가 완전히 로드된 후 무작위 순서로 비동기적으로 로드되어 방문자가 관심 있는 정보를 읽고 볼 수 있는 기회를 제공합니다. . 시각적으로 방문자의 눈을 통해 페이지 로딩 속도가 크게 "속도가 빨라집니다".
자바스크립트에서 이미지를 지연 로딩하는 아이디어아이디어는 일반적으로 간단합니다. 자바스크립트 “domready”에는 그러한 이벤트가 있습니다. 이는 HTML 문서의 전체 구조를 수신하는 동안 그리고 페이지가 완전히 로드되기 전에도 발생합니다. 따라서 이 이벤트가 발생한 후 필요한 이미지 목록을 얻고 각 이미지의 src 속성을 "재설정"하여 해당 값을 설정합니다(예: 앵커: #). 이미지의 Src는 별도의 이미지 속성(예: longDesc)에 저장됩니다. CSS 규칙을 할당하여 그림을 숨깁니다. 가시성: 숨김.
window.onload 이벤트를 사용하여 페이지가 완전히 로드된 후 각 이미지는 기본 src 속성으로 "반환"됩니다(본질적으로 원본 이미지가 "로드"됩니다). 페이지에 그림이 차례로 "나타나기" 시작합니다.
지연 로딩(lazy loading)에 대한 아이디어를 개선해보자방문자에게 표시되는 이미지 로드만 지연했다면 어떻게 될까요? 화면에 보이는 부분에 있나요? 그리고 필요에 따라 방문자가 스크롤 버튼을 사용할 때 나머지를 로드하시겠습니까?
또 뭐야? 페이지에서 어떤 일이 일어나고 있는지 방문자에게 시각적으로 보여주는 것이 좋을 것입니다. 예를 들어 지연된 이미지가 로드됩니다. 이렇게 하려면 이미지 바로 뒤에 스팬 요소를 삽입하고 CSS 클래스 프리로더를 할당한 다음 CSS 내에서 요소의 스타일을 지정하면 됩니다.
그런 다음 gif 형식과 같은 주제별, 직관적인 동적 로딩 이미지에 배경을 할당합니다. 이제 image onload 객체 이벤트 발생 시 현재 이미지가 완전히 로드된 후,span.preloader 요소를 제거하고 이미지 자체를 표시하여 CSS 규칙을 이미지에 할당합니다. 가시성: 가시성;
Javascript에서 이미지 지연 로딩 구현그러나 여기서 첫 번째 문제가 발생합니다. 정말 놀랍습니다! 그러나 지금까지 이미지 개체에 대한 onload 이벤트를 제대로 지원하는 브라우저는 없습니다. 이벤트는 저절로 발생합니다.
결과적으로 이미지가 나타나거나 전혀 나타나지 않을 수 있으며, 동일한 페이지를 여러 번 로드하는 동안에도 동일한 이미지가 나타날 수 있습니다. 이벤트가 전혀 발생하지 않거나 이미지가 완전히 로드되기 전에 더 일찍 발생할 수도 있습니다.
Image 객체에 대한 onload 이벤트 에뮬레이션그래서 우리는 고민 끝에 이미지의 길이와 높이 속성(너비, 높이)이 0이 아닌 경우에만 이미지가 로드된 것으로 간주한다는 결론에 도달했습니다. 그러나 여기서는 평소와 같이 이미지 로드 시도가 실패할 경우 "기본" 이미지를 길이와 높이가 있는 적십자로 "대체"하는 Internet Explorer에 만족했습니다.
이미지 객체의 속성을 더 자세히 조사한 결과, 이미지가 완전히 로드되었는지 여부를 나타내는 전체 속성도 확인해야 한다는 사실을 발견했습니다. 또한 Webkit 엔진을 기반으로 구축된 Safari와 Google Chrome은 만족했으며 이미지가 로드되었는지 여부에 관계없이 차이가 없으며 완전성은 항상 사실이라고 생각합니다.
따라서 각 이미지에 대해 onerror 및 onabort 이벤트를 처리해야 하며, 이러한 이벤트가 발생하면(로딩 오류가 있는 경우) 이미지의 너비 및 높이 속성을 0으로 할당해야 합니다. 그래서 결국 우리는 특정 시간 간격으로 이미지 객체의 세 가지 속성을 확인합니다.
Complete = true이고 너비, 높이가 0과 다르면 이미지가 완전히 로드되고 깨지지 않습니다. 그러나 끝없는 간격 이벤트를 "생성"하지 않기 위해 현재 이미지에 대한 간격 확인 이벤트를 취소할 최대 시간을 결정하고 이미지를 얻을 수 없다고 가정하고 해당 이미지를 숨깁니다. 로드하는 개체입니다.
또한 모든 이미지를 방문자 화면의 보이는 영역에 있는 그룹, 페이지가 완전히 로드된 직후 다운로드에 추가하는 그룹, 보이지 않는 영역에 있는 이미지의 두 그룹으로 나눌 것입니다. 화면에서 onscroll 이벤트가 발생할 때(방문자가 마우스 스크롤을 사용할 때) 이러한 이미지를 로드합니다.
Mootools 및 jQuery에서 이미지 지연 로딩 구현Mootools와 jQuery에서 이미지 지연 로딩의 두 가지 구현을 알려드리겠습니다.
무툴즈 1.1 – 1.4.4:
/** Black#FFFFFF에 의해 이미지 로드가 지연됨 **/ loadWait = 30000; 로드체크 = 300; preloadObjects = "img"; notImagesLoaded = ; 제외이미지 = 거짓; //excludeImages = "제외" function getScreenHeight())( var myHeight = 0; if(typeof(window.innerHeight) == "number") ( //IE가 아닌 myHeight = window.innerHeight; ) else if(document. documentElement && (document.documentElement.clientHeight || document.documentElement.clientHeight))( //"표준 준수 모드"의 IE 6+ myHeight = document.documentElement.clientHeight; ) else if(document.body && (document.body. clientHeight || document.body.clientHeight)) ( //IE 4 호환 myHeight = document.body.clientHeight; ) return myHeight; ) function preloadOther())( var l = notImagesLoaded.length; var currentExists = false; for(var 나는 = 0;나는< l; i ++){ var item = notImagesLoaded[i]; if(item){ loadImage(item); currentExists = true; }; }; if(!currentExists){ notImagesLoaded = ; window.removeEvent("scroll",preloadOther); }; }; function imagesPreloader(){ $$(preloadObjects).each(function(item){ if(item.nodeName.toLowerCase() == "img" && (typeof excludeImages == "undefined" || excludeImages == false || (item.className.indexOf(excludeImages) == -1))){ item.longDesc = item.src; item.src = "#"; var preloaderElt= new Element("span",{ styles:{"display":"inline-block"}}); $(preloaderElt).className = "preloader "+item.className; preloaderElt.inject(item,"before"); loadImage(item); }; }); window.addEvent("scroll",preloadOther); }; function loadImage(item){ var pos = $(item).getPosition(); var ItemOffsetTop = typeof pos == "object" && typeof pos.y != "undefined" ? pos.y: 0; var documentScrollTop = $(window).getScrollTop(); var scrHeight= getScreenHeight(); if(ItemOffsetTop loadWait){ $clear(this.storePeriod); this.storePeriod = false; if(typeof this.loadedCount != "undefined" && notImagesLoaded){ notImagesLoaded = false; }; $(this).setStyles({"display":"none","visibility":"hidden"}); if(typeof $(this.previousSibling).destroy == "function"){ $(this.previousSibling).destroy(); } else { $(this.previousSibling).remove(); } } }.periodical(loadCheck,item); } else { if(typeof item.loadedCount == "undefined"){ item.loadedCount = notImagesLoaded.length; notImagesLoaded = item; }; }; }; $(window).addEvent("domready",imagesPreloader);
jQuery 1.3.2 – 1.7.1:
/** Black#FFFFFF에 의해 이미지 로드가 지연됨 **/ loadWait = 30000; 로드체크 = 300; preloadObjects = "img"; notImagesLoaded = ; 제외이미지 = 거짓; function getScreenHeight())( var myHeight = 0; if(typeof(window.innerHeight) == "number") ( //IE가 아닌 myHeight = window.innerHeight; ) else if(document.documentElement && (document.documentElement. clientHeight || document.documentElement.clientHeight))( //"표준 준수 모드"의 IE 6+ myHeight = document.documentElement.clientHeight; ) else if(document.body && (document.body.clientHeight || document.body. clientHeight )) ( //IE 4 호환 myHeight = document.body.clientHeight; ) return myHeight; ) function preloadOther())( var l = notImagesLoaded.length; var currentExists = false; for(var i = 0; i< l; i ++){ var item = notImagesLoaded[i]; if(item){ loadImage(item); currentExists = true; }; }; if(!currentExists){ notImagesLoaded = ; jQuery(window).unbind("scroll",preloadOther); }; }; function imagesPreloader(){ jQuery(preloadObjects).each(function(){ var item = this; if(item.nodeName.toLowerCase() == "img" && (typeof excludeImages == "undefined" || excludeImages == false || (item.className.indexOf(excludeImages) == -1))){ item.longDesc = item.src; item.src = "#"; item.alt = ""; var preloaderElt= jQuery(""); jQuery(preloaderElt).css({"display":"block"}); preloaderElt.className = "preloader "+item.className; jQuery(item).before(preloaderElt); loadImage(item); }; }); jQuery(window).bind("scroll",preloadOther); }; function loadImage(item){ var pos = jQuery(item).position(); var ItemOffsetTop = typeof pos == "object" && typeof pos.top != "undefined" ? pos.top: 0; var documentScrollTop = jQuery(window).scrollTop(); var scrHeight= getScreenHeight(); if(ItemOffsetTop loadWait){ clearInterval(item.storePeriod); item.storePeriod = false; if(typeof item.loadedCount != "undefined" && notImagesLoaded){ notImagesLoaded = false; }; jQuery(item).css({"display":"none","visibility":"hidden"}); jQuery(item.previousSibling).remove(); }; },loadCheck); } else { if(typeof item.loadedCount == "undefined"){ item.loadedCount = notImagesLoaded.length; notImagesLoaded = item; }; }; }; jQuery(document).ready(imagesPreloader);
자바스크립트에서 이미지 지연 로딩을 구현하는 예참고: jQuery.nocon conflict()와 호환 모드에서 사용하는 경우 $ 기호의 모든 발생은 매개변수를 jQuery 객체에 전달하여 대체됩니다.
자바스크립트 설정:
CSS 설정:
이미지 로딩을 표시하는 요소의 스타일을 지정하려면 클래스를 사용하십시오.
Span.preloader ( 디스플레이: 블록; 배경: url(이미지 로딩 경로); )
여기서 원하는 대로 이미지가 완전히 로드될 때까지 이미지 "대신" 표시될 요소의 스타일을 지정할 수 있습니다. 이span.preloader 요소에는 이미지 클래스에 해당하는 추가 클래스도 할당되어 CSS 스타일 생성을 단순화합니다.
설명: 이는 지연된 로딩 대기열에 추가된 이미지의 클래스가 class=”bigImage”인 경우 로딩 프로세스를 “시각화”하는 “스텁”span.preloader의 클래스가 class=”preloader bigImage”임을 의미합니다. 기본적으로 이미지에 할당될 모든 규칙은 스텁에 적용됩니다. 결과적으로 이미지를 지연 로딩하면 사이트 페이지의 모양이 변경되지 않습니다.
어떤 브라우저에서 지연 로딩이 테스트되었나요?IE 7,8,9, Firefox 3.6 – 10, Opera 11.61, Safari, Chrome 최신
지연 로딩이 실제로 작동하는지 어떻게 확인할 수 있나요? 그리고 페이지가 로드된 직후에 이미지를 로드합니까?육안으로도 솔루션을 설치한 후 사이트가 더 빠르게 "로드"되기 시작하고 지연 로딩에 지정된 이미지는 현재 페이지가 완전히 로드된 후에만 "로드"되는 것을 확인할 수 있습니다.
그러나 완전히 확인하려면 예를 들어 Opera 브라우저를 다운로드하고 예제 중 하나를 열고 페이지가 완전히 로드된 후 아래로 스크롤할 때 이미지 로드가 브라우저 상태 표시줄에 시각적으로 표시된다는 사실에 주의하세요. (주소 표시줄) 스크롤하는 동안(요청된 이미지의 카운터가 변경됨)
jQuery, Mootools를 사용하지 않고 순수한 자바스크립트 버전의 지연 로딩이 있을까요?네, 하지만 추가 기능을 작성하고 테스트해야 하므로 조금 후에 공개될 예정입니다.
- 번역
- 지도 시간
빠르고 원활한 이미지 로딩은 좋은 웹 인터페이스의 중요한 구성 요소 중 하나입니다. 또한 디자인에 큰 사진을 사용하는 사이트가 점점 더 많아지고 있으며, 이러한 프로젝트의 경우 그래픽의 올바른 로딩을 모니터링하는 것이 특히 중요합니다. 이 문서에서는 이미지 로드를 제어하는 데 도움이 되는 몇 가지 기술을 설명합니다.
각 이미지에 컨테이너 사용하기 사이트의 모든 이미지에 적용할 수 있는 간단한 방법입니다. 비결은 각 이미지가 행 단위 로딩을 방지하는 DIV에 싸여 있다는 것입니다.
컨테이너를 사용하면 이미지의 가로 세로 비율을 제어할 수 있고 로딩 표시기를 사용할 수도 있는데, 이는 이미지가 무거울 때 매우 편리합니다.
예를 들어 가로 세로 비율을 4:3으로 설정하려면 다음 CSS를 사용할 수 있습니다.
Img_wrapper( 위치: 상대; 패딩 상단: 75%; 오버플로: 숨김; ) .img_wrapper img( 위치: 절대; 상단: 0; 너비: 100%; 불투명도: 0; )
이미지가 완전히 로드된 후에만 브라우저에 표시되도록 하려면 이미지에 대한 onload 이벤트를 추가하고 JavaScript를 사용하여 이벤트를 처리해야 합니다.
function imgLoaded(img)( var $img = $(img); $img.parent().addClass("loaded"); );
HEAD 태그 내부의 함수 코드는 jQuery나 다른 플러그인 뒤의 맨 끝 부분에 배치되어야 합니다. 이미지가 완전히 로드되면 페이지에 표시되어야 합니다.
Img_wrapper.loaded img(불투명도: 1; )
이미지의 부드러운 모양 효과를 위해 CSS3 전환을 사용할 수 있습니다.
Img_wrapper img( 위치: 절대; 상단: 0; 너비: 100%; 불투명도: 0; -webkit-transition: 불투명도 150ms; -moz-transition: 불투명도 150ms; -ms-transition: 불투명도 150ms; 전환: 불투명도 150ms; )
이 방법의 실제 예제를 사용할 수 있습니다.
우리는 프로세스를 제어하기 위해 SlideLoaded() 함수를 사용합니다:
함수 SlideLoaded(img)( var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find("img").length, ratesLoaded = null; $img.addClass("loaded "); var Loaded = $slideWrapper.find(".loaded").length; if(loaded == total)(퍼센트Loaded = 100; // 인스턴스화 플러그인 $slideWrapper.easyFader(); ) else ( // 진행률 추적 백분율 로드됨 = 로드됨/전체 * 100; ); );
로드된 이미지에는 로드된 클래스가 할당되고 전체 진행 상황이 표시됩니다. 다시 말하지만, JavaScript는 다른 모든 것 이후 HEAD 태그 끝에 배치되어야 합니다.
var HeroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]
방문자가 사이트를 방문하면 메인 페이지를 로드한 후 이미지가 캐시에 로드되기 시작합니다. 캐싱이 현재 콘텐츠 표시를 방해하지 않도록 하려면 창 로드 이벤트에 JavaScript 기능을 추가해야 합니다.
함수 preCacheHeros())( $.each(heroArray, function())( var img = new Image(); img.src = this; )); ); $(window).load(function())( preCacheHeros(); ));
이 방법을 사용하면 사이트의 유용성이 향상되지만 서버에 추가 부하가 발생합니다. 이러한 기능을 구현할 때 이 점을 염두에 두어야 합니다. 또한 사이트 방문자의 가능한 경로를 고려하고 사용자가 가장 방문할 가능성이 높은 페이지에 있는 이미지를 캐시해야 합니다. 사이트를 통한 이러한 경로를 이해하려면 트래픽 통계를 분석해야 합니다.
이미지 URL이 src가 아닌 data-src에 지정된다는 점은 주목할 가치가 있습니다. 이는 브라우저가 이미지를 즉시 다운로드하지 않도록 하기 위해 필요합니다. 대신 src에는 base64 투명 GIF 픽셀이 로드되어 서버로의 왕복 횟수가 줄어듭니다.
남은 것은 원하는 이벤트가 발생할 때 src 값을 data-src로 변경하는 것뿐입니다. JavaScript를 사용하면 이미지를 점진적으로 로드할 수 있습니다.
함수lazyLoad())( var $images = $(".lazy_load"); $images.each(function())( var $img = $(this), src = $img.attr("data-src") ; $ img .on("load",imgLoaded($img)) .attr("src",src); )); ); $(window).load(function())(lazyLoad(); );
결론 사이트의 이미지 로딩을 관리하는 가장 좋은 방법은 없습니다. 각각의 특정 경우에 적절한 방법을 선택하고 적절한 경우 여러 가지 방법을 결합해야 합니다. 주의해야 할 주요 사항 중 하나는 성능과 트래픽입니다. 간단히 말해서, 우선 사이트 사용자에게 어떻게 더 편리할지 생각해야 합니다.