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

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

1. 구현 아이디어

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

JavaScript 코드클립보드에 콘텐츠 복사

(기능 () {
함수 isArray(obj) {
반환 Object.prototype.toString.call(obj) === '[객체 배열]' ;
}
/**
* @param imgList 로드할 이미지 주소 목록, ['aa/asd.png','aa/xxx.png']
* @param callback 각 이미지가 성공적으로 로드된 후의 콜백과 "로드된 총 이미지 수/로드할 총 이미지 수"가 전달되어 진행 상황을 나타냅니다.
* @param timeout 각 이미지 로딩 시간 제한, 기본값은 5초
*/
var 로더 = 함수 (imgList, 콜백, 시간 초과) {
시간 초과 = 시간 초과 || 5000;
imgList = isArray(imgList) && imgList || [];
콜백 = 유형(콜백) === '함수' && 콜백;
var 전체 = imgList.length,
로드됨 = 0,
이미지 = [],
_on = 기능 () {
로드됨 < 전체 && ( 로드됨, 콜백 && 콜백(로드됨 / 전체));
};
if (!total) {
반환 콜백 && 콜백(1);
}
for (var i = 0; i < total; i ) {
images[i] = 새 이미지();
imgages[i].onload = imgages[i].onerror = _on;
imgages[i].src = imgList[i];
}
/**
* 제한 시간 * 전체 시간 범위(판정 조건 로드< 전체) 내에 로드되지 않은 정지 사진이 있는 경우 모든 사진이 로드되었음을 외부 환경에 알립니다
* 사용자가 너무 오래 기다리지 않도록 하는 것이 목적입니다
*/
setTimeout(함수 () {
로드됨 < 총 && (로드됨 = 총계, 콜백 && 콜백(로드됨 / 총계));
}, 시간 초과 * 전체);
};
"함수" === typeof 정의 && 정의.cmd 정의(기능 () {
반환로더
}) : window.imgLoader = 로더
})()

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

XML/HTML 코드클립보드에 콘텐츠 복사

<스크립트 src="../js/ imgLoader.js">스크립트>
<스크립트>
imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], 함수(백분율){
console.log(백분율)
})
스크립트>

실행 결과:

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

XML/HTML 코드클립보드에 콘텐츠 복사

<스크립트 src="js/zepto.js ">스크립트>
<스크립트 src="js/ Transition.js">스크립트>
<스크립트 src="js/ hammer.js">스크립트>
<스크립트 src="js/ imgLoader.js">스크립트>
<스크립트 src="js/ swipe.js">스크립트>

2) 虽然我了demo中用到了3张比거대한 사진, 但是由于이 있습니다本地环境，加载速島还是不常快，所以一开始的时候，很难看到预加载的效果，最后只能想办法每个进島回调の前做一下延迟，这才可以看到前sidegif图文一开始的那个loading效果，实现方式是：

XML/HTML 코드复复内容到剪贴板

//模拟加载慢的效果
var 콜백 = [];
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], 함수(백분율) {
var i = 콜백.length;
callbacks.push(function(){
setTimeout(function(){
var 퍼센트T = 퍼센트 * 100;
$('#loader__info').html('로드 중 ' (parseInt(percentT)) '%');
$('#loader__progress')[0].style.width = percentT '%';
if (백분율 == 1) {
setTimeout(function(){
$('#loader').remove();
Swipe.init();
}, 600);
}
콜백[i 1] && 콜백[i 1]();
},600);
});
if(백분율 == 1) {
콜백[0]();
}
});

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

XML/HTML 코드复复内容到剪贴板

imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], 함수(백분율) {
var 퍼센트T = 퍼센트 * 100;
$('#loader__info').html('로드 중 ' (parseInt(percentT)) '%');
$('#loader__progress')[0].style.width = percentT '%';
if (백분율 == 1) {
$('#loader').remove();
Swipe.init();
}
});

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

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