웹 프론트엔드 H5 튜토리얼 간단한 이미지 사전 로드 구성요소를 사용하여 html5 모바일 페이지의 사용자 경험 개선 _html5 튜토리얼 기술

간단한 이미지 사전 로드 구성요소를 사용하여 html5 모바일 페이지의 사용자 경험 개선 _html5 튜토리얼 기술

May 16, 2016 pm 03:51 PM
h5 구성 요소

h5 모바일 페이지에서 작업할 때 페이지가 열렸지만 내부 이미지가 로드되지 않은 상황이 발생했을 것입니다. 이 문제는 페이지 기능에 영향을 미치지는 않지만 도움이 되지 않습니다. 사용자 경험에. 네트워크 속도에 관계없이 이 문제를 해결하는 방법은 여러 가지가 있습니다. 가장 기본적인 방법은 http 요청 병합, 캐시 관리, 이미지 압축 등과 같은 측면에서 성능을 최적화하는 것입니다. 페이지 로딩 과정에서 사용자가 페이지를 열면 바로 첫 번째 화면이 표시되지 않고, 대신 리소스 로딩 효과가 먼저 표시되고 로딩이 완료된 후 페이지의 메인 콘텐츠가 표시됩니다. 문제를 해결할 수 있습니다. 이 로딩 효과는 사용자의 검색 시간을 차지하지만 더 아름답고 흥미롭게 만들 수 있으므로 사용자 경험에 영향을 미치지 않습니다. 이 문서에서는 이 아이디어를 구현하고 매우 간단한 이미지 사전 로드 구성 요소를 제공합니다. 구현이 간단하고 기능이 약하지 않아 모바일 페이지를 만들 때 참고할 가치가 있습니다.
효과:

1. 구현 아이디어

HTML의 img 태그와 CSS의 background-imag는 관련 이미지를 로드하도록 브라우저를 실행합니다. 그러나 이미지가 이미 로드된 경우 브라우저는 로드된 이미지를 직접 사용하므로 이미지를 렌더링할 수 있습니다. 즉시 페이지. 자바스크립트를 통해 이미지 객체를 생성한 다음 이러한 객체의 src 속성을 로드할 이미지의 주소로 설정합니다. 그러면 브라우저가 이미지를 로드하도록 트리거할 수도 있습니다. 이를 사용하여 이미지 사전 로드 기능을 실현할 수 있습니다. 먼저 사용하세요. 페이지와 관련된 요소를 숨긴 다음 js를 사용하여 이미지를 로드하고 모든 이미지가 로드될 때까지 기다린 다음 숨겨진 요소를 표시합니다. 그러나 이는 단지 기본적인 구현 아이디어일 뿐, 보다 강력한 기능을 갖춘 preloading 컴포넌트를 완성하기 위해서는 여전히 세 가지 문제가 있습니다:
1) Progress 문제
Preloading이 동시에 이루어지기 때문에 preloading 컴포넌트는 반드시 필요합니다. 그 결과 로딩 진행 상황을 실시간으로 외부 컨텍스트에 알려야 합니다. 진행률을 구현하는 방법에는 두 가지가 있는데, 첫 번째는 로드된 데이터 크기/전체 데이터 크기이고, 두 번째는 로드된 파일 수/총 파일 수입니다. 브라우저에서는 첫 번째 방법을 사용하는 것이 비현실적입니다. 기본 방법이 아니므로 두 번째 방법만 사용할 수 있습니다.
2) 이미지 로딩 실패 문제
예를 들어 이미지가 4개일 경우 50%가 로딩된 상태인데, 세 번째 이미지를 로딩하면 75%로 진행률을 피드백해야 오류가 발생합니다. ? 대답은 다음과 같습니다. 그렇습니다. 그렇지 않으면 진행률이 100%에 도달하지 않으며 페이지의 기본 콘텐츠가 표시될 기회가 없습니다. 이미지 로딩이 실패할 수도 있지만 이미지 자체와는 아무 관련이 없을 수도 있습니다. 존재하지 않습니까? 이는 이미지 로딩 실패가 로더의 기능에 영향을 주어서는 안 된다는 것을 의미합니다.
3) 이미지 로딩 시간 초과 문제
이미지를 너무 오랫동안 로딩할 수 없습니다. 그렇지 않으면 사용자가 로딩 효과에 머물면서 메인 콘텐츠를 볼 수 없게 되어 사용자의 대기 시간이 걷잡을 수 없을 정도로 길어지게 됩니다. 이는 로더의 원래 의도에 어긋나는 것입니다. 따라서 각 이미지마다 로딩 타임아웃을 설정해야 하며, 모든 이미지의 타임아웃 이후에도 로딩이 완료되지 않으면 로딩을 적극적으로 중단하고 로딩이 완료되었음을 외부 컨텍스트에 알리고 메인 콘텐츠를 로딩해야 합니다. 표시됩니다.
위 요구 사항을 기반으로 이 문서에서 제공되는 구현은 다음과 같습니다.

JavaScript 코드클립보드에 콘텐츠 복사
  1. (기능 () {    
  2. 함수 isArray(obj) {    
  3. 반환 Object.prototype.toString.call(obj) === '[객체 배열]' ;    
  4. }    
  5. /**
  6. * @param imgList 로드할 이미지 주소 목록, ['aa/asd.png','aa/xxx.png']
  7. * @param callback 각 이미지가 성공적으로 로드된 후의 콜백과 "로드된 총 이미지 수/로드할 총 이미지 수"가 전달되어 진행 상황을 나타냅니다.
  8. * @param timeout 각 이미지 로딩 시간 제한, 기본값은 5초
  9. */    
  10. var 로더 = 함수 (imgList, 콜백, 시간 초과) {    
  11. 시간 초과 = 시간 초과 || 5000;    
  12. imgList = isArray(imgList) && imgList || [];    
  13. 콜백 = 유형(콜백) === '함수' && 콜백;    
  14. var 전체 = imgList.length,    
  15. 로드됨 = 0,    
  16. 이미지 = [],    
  17. _on = 기능 () {    
  18. 로드됨 < 전체 && ( 로드됨, 콜백 && 콜백(로드됨 / 전체));    
  19. };    
  20. if (!total) {    
  21. 반환 콜백 && 콜백(1);    
  22. }    
  23. for (var i = 0; i < total; i ) {    
  24. images[i] =  이미지();    
  25. imgages[i].onload = imgages[i].onerror = _on;    
  26. imgages[i].src = imgList[i];    
  27. }    
  28. /**
  29. * 제한 시간 * 전체 시간 범위(판정 조건 로드< 전체) 내에 로드되지 않은 정지 사진이 있는 경우 모든 사진이 로드되었음을 외부 환경에 알립니다
  30. * 사용자가 너무 오래 기다리지 않도록 하는 것이 목적입니다
  31. */    
  32. setTimeout(함수 () {    
  33. 로드됨 < 총 && (로드됨 = 총계, 콜백 && 콜백(로드됨 / 총계));    
  34. }, 시간 초과 * 전체);    
  35. };
  36. "함수" === typeof 정의 && 정의.cmd 정의(기능 () {
  37. 반환로더
  38. }) : window.imgLoader = 로더
  39. })()

사용법(코드의 test.html에 해당):

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <스크립트 src="../js/ imgLoader.js">스크립트> 
  2. <스크립트> 
  3. imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], 함수(백분율){
  4. console.log(백분율)
  5. })
  6. 스크립트> 

실행 결과:


2. 데모 설명
이 글의 시작 부분에 있는 효과, 해당 페이지는 index.html이며, 두 가지 문제가 필요합니다. 이 효과에 대해 설명합니다:
1) 이전 블로그에서 소개한 슬라이딩 스크린 아이디어 Hammer.js 캐러셀 원리를 사용하여 간단한 슬라이딩 스크린 기능을 구현하고 일부 로직을 스와이프로 래핑합니다. 이 모듈에는 Swipe.init()를 호출하여 외부에서 슬라이딩 화면 관련 기능을 초기화할 수 있도록 init 메소드가 있습니다. js가 로드된 후 초기화됩니다. 이 init 메서드를 사용하면 로딩이 완료될 때까지 슬라이딩 화면 로직을 지연하여 초기화할 수 있습니다. index.html은 총 5개의 js를 참조합니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <스크립트 src="js/zepto.js ">스크립트>    
  2. <스크립트 src="js/ Transition.js">스크립트>    
  3. <스크립트 src="js/ hammer.js">스크립트>    
  4. <스크립트 src="js/ imgLoader.js">스크립트>    
  5. <스크립트 src="js/ swipe.js">스크립트>   
2) 虽然我了demo中用到了3张比거대한 사진, 但是由于이 있습니다本地环境,加载速島还是不常快,所以一开始的时候,很难看到预加载的效果, 最后只能想办法 每个进島回调の前做一下延迟,这才可以看到前sidegif图文一开始的那个loading效果,实现方式是:
XML/HTML 코드复复内容到剪贴板
  1. //模拟加载慢的效果    
  2. var 콜백 = [];    
  3. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], 함수(백분율) {    
  4. var i = 콜백.length;    
  5. callbacks.push(function(){    
  6. setTimeout(function(){    
  7. var 퍼센트T = 퍼센트 * 100;    
  8. $('#loader__info').html('로드 중 '   (parseInt(percentT))   '%');    
  9. $('#loader__progress')[0].style.width = percentT   '%';    
  10. if (백분율 == 1) {    
  11. setTimeout(function(){    
  12. $('#loader').remove();    
  13. Swipe.init();    
  14. }, 600);    
  15. }    
  16. 콜백[i   1] && 콜백[i   1]();    
  17. },600);    
  18. });    
  19. if(백분율 == 1) {    
  20. 콜백[0]();    
  21. }    
  22. });   

지금은 最好还是不要刻迟,没必要为了让用户看到一个好看有趣的加载效果,就浪费它不必要的等待时间,所以真实环境还是应该用下side代码:

XML/HTML 코드复复内容到剪贴板
  1. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], 함수(백분율) {    
  2. var 퍼센트T = 퍼센트 * 100;    
  3. $('#loader__info').html('로드 중 '   (parseInt(percentT))   '%');    
  4. $('#loader__progress')[0].style.width = percentT   '%';    
  5. if (백분율 == 1) {    
  6. $('#loader').remove();    
  7. Swipe.init();    
  8. }    
  9. });   

3. 참고
사전 로딩은 비교적 일반적인 구현 효과이지만, 사용할 때 주의해야 할 몇 가지 문제가 있습니다.
1 ) 페이지가 큰 경우
를 사용하는 방법 일반적으로 페이지 크기가 3M를 초과하는 경우 해당 페이지에 상대적으로 많은 양의 데이터가 포함되어 있는 경우 사용을 고려하면 됩니다. 로딩이 느리다는 것을 확실히 알 수 있습니다.
2) 스프라이트 이미지를 사용해 보세요
3) 로딩 효과를 구현할 때 이미지를 사용하지 마세요. 사용하고 싶어도 아주 작은 이미지를 사용해야 합니다. 그렇지 않으면 로딩 효과가 멈춥니다. 그리고 그것은 의미가 없을 것입니다.
4. 요약
이 글에서는 h5 모바일 페이지 개발에 적용할 수 있는 간단한 이미지 프리로더를 주로 소개합니다. 또한 이를 수정하여 오디오나 비디오 파일과 같은 다른 유형의 리소스를 로드하는 데 사용할 수도 있습니다. 결국 이러한 유형의 DOM 객체는 Image 객체와 유사한 속성과 콜백도 제공합니다. 사전 로드 방법과 달리 이미지를 지연 로드하는 기술도 이미 인터넷에 비교적 사용하기 쉬운 jquery 플러그인이 있지만 여전히 그 아이디어와 구현 포인트에 대해 더 알아볼 가치가 있습니다. 시간이 있을 때 연구 조사를 하세요. 동시에 Script House 웹사이트를 지속적으로 지원해 주시는 모든 분들께 감사드립니다!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Windows 10 이전 버전 구성 요소 DirectPlay를 설치하는 방법 Windows 10 이전 버전 구성 요소 DirectPlay를 설치하는 방법 Dec 28, 2023 pm 03:43 PM

많은 사용자가 win10에서 일부 게임을 플레이할 때 화면이 멈추거나 화면이 흐려지는 등의 문제에 항상 직면합니다. 이때 다이렉트 플레이 기능을 켜면 문제를 해결할 수 있으며 기능 작동 방법도 매우 간단합니다. 이전 버전의 win10 컴포넌트 다이렉트플레이 설치 방법 1. 검색 상자에 "제어판"을 입력하고 엽니다. 2. 보기 방법으로 큰 아이콘을 선택합니다. 3. "프로그램 및 기능"을 찾습니다. 4. 활성화 또는 활성화하려면 왼쪽을 클릭합니다. Win 기능 끄기 5. 여기에서 이전 버전을 선택하세요. 확인란을 선택하세요.

Vue를 사용하여 캘린더 구성요소를 구현하는 방법은 무엇입니까? Vue를 사용하여 캘린더 구성요소를 구현하는 방법은 무엇입니까? Jun 25, 2023 pm 01:28 PM

Vue는 매우 인기 있는 프런트 엔드 프레임워크로, 개발자가 효율적이고 유연하며 유지 관리하기 쉬운 웹 애플리케이션을 구축하는 데 도움이 되는 구성 요소화, 데이터 바인딩, 이벤트 처리 등과 같은 많은 도구와 기능을 제공합니다. 이번 글에서는 Vue를 사용하여 캘린더 컴포넌트를 구현하는 방법을 소개하겠습니다. 1. 요구사항 분석 먼저 이 캘린더 구성요소의 요구사항을 분석해야 합니다. 기본 달력에는 다음과 같은 기능이 있어야 합니다. 이번 달의 달력 페이지를 표시하고 특정 날짜를 클릭하여 이전 달 또는 다음 달로 전환할 수 있도록 지원합니다.

VUE3 개발 기본 사항: 확장을 사용하여 구성 요소 상속 VUE3 개발 기본 사항: 확장을 사용하여 구성 요소 상속 Jun 16, 2023 am 08:58 AM

Vue는 현재 가장 인기 있는 프런트엔드 프레임워크 중 하나이며, VUE3은 Vue 프레임워크의 최신 버전입니다. VUE2에 비해 VUE3는 더 높은 성능과 더 나은 개발 경험을 제공하며 많은 개발자의 첫 번째 선택이 되었습니다. VUE3에서는 익스텐트를 사용하여 컴포넌트를 상속하는 것이 매우 실용적인 개발 방법입니다. 이 글에서는 익스텐트를 사용하여 컴포넌트를 상속하는 방법을 소개합니다. 확장이란 무엇입니까? Vue에서 확장은 매우 실용적인 속성으로, 하위 구성 요소가 상위 구성 요소로부터 상속받는 데 사용할 수 있습니다.

h5은 무슨 뜻인가요? h5은 무슨 뜻인가요? Aug 02, 2023 pm 01:52 PM

H5는 HTML의 최신 버전인 HTML5를 말하며, H5 기술과 마찬가지로 개발자에게 더 많은 선택권과 창의적인 공간을 제공하는 강력한 마크업 언어입니다. 점차 성숙해지고 대중화되면서 인터넷 세계에서 점점 더 중요한 역할을 담당하게 될 것이라고 믿습니다.

Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Mar 15, 2024 pm 04:51 PM

Angular 프레임워크의 구성 요소에 대한 기본 표시 동작은 블록 수준 요소에 대한 것이 아닙니다. 이 디자인 선택은 구성 요소 스타일의 캡슐화를 촉진하고 개발자가 각 구성 요소가 표시되는 방법을 의식적으로 정의하도록 장려합니다. CSS 속성 표시를 명시적으로 설정하면 Angular 구성 요소의 표시를 완전히 제어하여 원하는 레이아웃과 응답성을 얻을 수 있습니다.

이전 버전의 win10 구성 요소 설정을 여는 방법 이전 버전의 win10 구성 요소 설정을 여는 방법 Dec 22, 2023 am 08:45 AM

Win10 이전 버전 구성요소는 일반적으로 기본적으로 닫혀 있으므로 사용자가 직접 설정해야 합니다. 먼저 작업은 아래 단계를 따르기만 하면 됩니다. 1. 시작을 클릭한 다음 "Win 시스템"을 클릭합니다. 2. 클릭하여 제어판으로 들어갑니다. 3. 그런 다음 아래 프로그램을 클릭합니다. 4. "Win 기능 활성화 또는 끄기"를 클릭합니다. 5. 여기에서 원하는 것을 선택할 수 있습니다. 열기 위해

Vue 구성요소 실습: 페이징 구성요소 개발 Vue 구성요소 실습: 페이징 구성요소 개발 Nov 24, 2023 am 08:56 AM

Vue 컴포넌트 실습: 페이징 컴포넌트 개발 소개 웹 애플리케이션에서 페이징 기능은 필수 컴포넌트입니다. 좋은 페이지 매김 구성 요소는 표현이 간단하고 명확해야 하며, 기능이 풍부하고, 통합 및 사용이 쉬워야 합니다. 이 기사에서는 Vue.js 프레임워크를 사용하여 고도로 사용자 정의 가능한 페이징 구성 요소를 개발하는 방법을 소개합니다. Vue 컴포넌트를 활용하여 개발하는 방법을 코드 예시를 통해 자세히 설명하겠습니다. 기술 스택 Vue.js2.xJavaScript(ES6) HTML5 및 CSS3 개발 환경

Vue 컴포넌트 개발: 진행률 표시줄 컴포넌트 구현 방법 Vue 컴포넌트 개발: 진행률 표시줄 컴포넌트 구현 방법 Nov 24, 2023 am 08:56 AM

Vue 구성 요소 개발: 진행률 표시줄 구성 요소 구현 방법 머리말: 웹 개발에서 진행률 표시줄은 데이터 요청, 파일 업로드, 양식 제출과 같은 시나리오에서 작업 진행 상황을 표시하는 데 자주 사용되는 일반적인 UI 구성 요소입니다. Vue.js에서는 컴포넌트를 커스터마이즈하여 진행률 표시줄 컴포넌트를 쉽게 구현할 수 있습니다. 이 기사에서는 구현 방법을 소개하고 구체적인 코드 예제를 제공합니다. Vue.js 초보자에게 도움이 되길 바랍니다. 구성 요소 구조 및 스타일 먼저 진행률 표시줄 구성 요소의 기본 구조와 스타일을 정의해야 합니다.

See all articles