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

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

효과(img_loader.rar):

1. 구현 아이디어

HTML의 img 태그와 CSS의 background-imag는 관련 이미지를 로드하도록 브라우저를 실행합니다. 그러나 이미지가 이미 로드된 경우 브라우저는 로드된 이미지를 직접 사용하므로 이미지를 렌더링할 수 있습니다. 즉시 페이지. 자바스크립트를 통해 이미지 객체를 생성한 다음 이러한 객체의 src 속성을 로드할 이미지의 주소로 설정합니다. 그러면 브라우저가 이미지를 로드하도록 트리거할 수도 있습니다. 이를 사용하여 이미지 사전 로드 기능을 실현할 수 있습니다. 먼저 사용하세요. 페이지와 관련된 요소를 숨긴 다음 js를 사용하여 이미지를 로드하고 모든 이미지가 로드될 때까지 기다린 다음 숨겨진 요소를 표시합니다. 그러나 이는 단지 기본적인 구현 아이디어일 뿐, 보다 강력한 기능을 갖춘 프리로딩 컴포넌트를 완성하려면 여전히 세 가지 문제가 있습니다:

1) 진행 문제

동시 프리로딩으로 인해. , 또한 외부 컨텍스트에 로드 진행 상황을 실시간으로 알려야 하는 사전 로드 효과를 만들어야 합니다. 진행 방법에는 두 가지가 있는데, 첫 번째는 로드된 데이터 크기/전체 데이터 크기이고, 두 번째는 로드된 파일 수/총 파일 수입니다. 브라우저에서는 첫 번째 방법을 사용하는 것이 비현실적입니다. 기본 방법이 아니므로 두 번째 방법만 사용할 수 있습니다.

2) 이미지 로딩 실패 문제

예를 들어 4개의 이미지가 있는데, 3번째 이미지를 로딩할 때 50%가 로딩되었습니다. 75%로 돌아가나요? 대답은 다음과 같습니다. 그렇습니다. 그렇지 않으면 진행률이 100%에 도달하지 않으며 페이지의 기본 콘텐츠가 표시될 기회가 없습니다. 이미지 로딩이 실패할 수도 있지만 이미지 자체와는 아무 관련이 없을 수도 있습니다. 존재하지 않습니까? 이는 이미지 로딩 실패가 로더의 기능에 영향을 주어서는 안 된다는 것을 의미합니다.

3) 이미지 로딩 시간 초과 문제

이미지를 너무 오랫동안 로딩할 수 없습니다. 그렇지 않으면 사용자가 로딩 효과에 머물면서 메인 콘텐츠를 볼 수 없으며, 사용자의 대기 시간은 통제할 수 없게 확장되어 사용자 경험이 저하되어 로더의 원래 의도가 무너집니다. 따라서 각 이미지마다 로딩 타임아웃을 설정해야 하며, 모든 이미지의 타임아웃 후에도 로딩이 완료되지 않은 경우에는 로딩을 적극적으로 포기하고 로딩이 완료되었음을 외부 컨텍스트에 알리고 메인 콘텐츠를 로딩해야 합니다. 표시됩니다.

위 요구 사항을 기반으로 이 문서에서 제공되는 구현은 다음과 같습니다.

(function () {    function isArray(obj) {        return Object.prototype.toString.call(obj) === '[object Array]';
    }    /**
     * @param imgList 要加载的图片地址列表，['aa/asd.png','aa/xxx.png']
     * @param callback 每成功加载一个图片之后的回调，并传入“已加载的图片总数/要加载的图片总数”表示进度
     * @param timeout 每个图片加载的超时时间，默认为5s     */
    var loader = function (imgList, callback, timeout) {
        timeout = timeout || 5000;
        imgList = isArray(imgList) && imgList || [];
        callback = typeof(callback) === 'function' && callback;        var total = imgList.length,
            loaded = 0,
            imgages = [],
            _on = function () {
                loaded <p>사용법(코드의 test.html에 해당): </p><p class="cnblogs_code" style="border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; border-bottom: #cccccc 1px solid; padding-bottom: 5px; padding-top: 5px; padding-left: 5px; border-left: #cccccc 1px solid; padding-right: 5px; background-color: #f5f5f5"><br></p><pre class="brush:php;toolbar:false"><script></script>
<script>
    imgLoader([&#39;../img/page1.jpg&#39;, &#39;../img/page2.jpg&#39;, &#39;../img/page3.jpg&#39;], function(percentage){
        console.log(percentage)
    });</script>

실행 결과:

2. 데모 설명

이 글의 시작 부분에 제공된 효과, 해당 페이지는 index.html입니다. , 이 효과에 대한 자세한 내용이 있습니다. 두 가지 질문을 설명해야 합니다.

1) 이전 블로그에서 소개한 슬라이딩 스크린 아이디어를 hammer.js와 결합하여 캐러셀 원리를 사용하여 간단한 슬라이딩 스크린 기능을 구현합니다. 그리고 swipe.js에서 일부 로직을 래핑하여 외부 세계로의 Swipe라는 전역 변수를 제공합니다. 이 모듈에는 Swipe.init()를 호출하여 슬라이딩 화면과 관련된 외부 기능을 초기화할 수 있는 init 메서드가 있습니다. js가 로드된 후 슬라이딩 화면 기능이 초기화됩니다. 이 init 메소드를 사용하면 로딩이 완료될 때까지 슬라이딩 화면 로직을 지연할 수 있습니다. index.html은 총 5개의 js를 참조합니다.

<script></script><script></script><script></script><script></script><script></script>

其中imgLoader.js就是前面介绍图片加载器的实现，前三个js都是为最后一个swipe.js服务的，感兴趣的可以继续我的博客利用轮播原理结合hammer.js实现简洁的滑屏功能了解相关内容。不过滑屏不是本文的重点，不了解swipe.js不会影响理解本文的内容~

2）虽然我在이미지 사전 로드 구성 요소를 사용하여 HTML5 모바일 페이지의 사용자 경험 개선中用到了3张比较大的图片，但是由于在本地环境，加载速度还是非常快，所以一开始的时候，很难看到预加载的效果，最后只能想办法在每个进度回调之前做一下延迟，这才可以看到前面gif图片一开始的那个loading效果，实现方式是：

//模拟加载慢的效果var callbacks = [];
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    var i = callbacks.length;
    callbacks.push(function(){
        setTimeout(function(){            var percentT = percentage * 100;
            $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');
            $('#loader__progress')[0].style.width = percentT + '%';            if (percentage == 1) {
                setTimeout(function(){
                    $('#loader').remove();
                    Swipe.init();
                }, 600);
            }
            callbacks[i + 1] && callbacks[i + 1]();
        },600);
    });    if(percentage == 1) {
        callbacks[0]();
    }
});

在真实环境，最好还是不要刻意去加这种延迟，没必要为了让用户看到一个好看有趣的加载效果，就浪费它不必要的等待时间，所以真实环境还是应该用下面的代码：

imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    var percentT = percentage * 100;
    $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');
    $('#loader__progress')[0].style.width = percentT + '%';    if (percentage == 1) {
        $('#loader').remove();
        Swipe.init();
    }
});

另外运行이미지 사전 로드 구성 요소를 사용하여 HTML5 모바일 페이지의 사용자 경험 개선，需要用到grunt启动静态服务，如果已经安装好grunt-cli，则直接运行grunt connect任务即可打开이미지 사전 로드 구성 요소를 사용하여 HTML5 모바일 페이지의 사용자 경험 개선的index.html。

3. 注意事项

预加载是一种比较常见的实现效果，但是在使用的时候，有些问题需要注意：

1）什么时候用

页面大的时候用，一般页面大小超过3M就该考虑使用；页面内包含数据量比较大的图片，在手机端测试能够明显看到加载缓慢的时候，可以考虑使用。

2）尽量使用sprite图片

3）加载效果实现的时候，尽量不用图片，即使要用也应该用很小的图片，否则加载效果卡在那就没有意义了。

4. 总结

本文主要介绍了一个简单的图片预加载器，可应用于h5移动页面的开发当中，在它的思路之下，如果有必要的话，还可以对它进行一些改造，用它来加载其它类型的资源，比如音频或者视频文件，毕竟这些类型的DOM对象也都有提供类似Image对象的属性和回调。与预加载的方式相反的，还有一种图片懒加载的技术，现在网上已经有比较好用的jquery插件了，不过还是很值的去深入了解下它的思路跟实现要点，等我有时间去研究研究再写博客来介绍，敬请关注！

위 내용은 이미지 사전 로드 구성 요소를 사용하여 HTML5 모바일 페이지의 사용자 경험 개선의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!