画像プリロード コンポーネントを使用して HTML5 モバイル ページのユーザー エクスペリエンスを向上させる

h5 モバイル ページで作業しているとき、ページは開いているが、内部の画像が読み込まれていないという状況に遭遇したことがあると思います。この問題はページの機能には影響しませんが、ページの動作には影響しません。ユーザー体験。ネットワーク速度に関係なく、この問題を解決するには多くの方法があります。最も基本的な方法は、http リクエストのマージ、キャッシュ管理、画像圧縮などの側面からパフォーマンスを最適化することです。もう 1 つは、使用されるすべての画像を前処理することです。ページの読み込みプロセスでは、ユーザーがページを開いたときに最初の画面が表示されず、最初にリソース読み込みエフェクトが表示され、読み込みが完了した後にページのメイン コンテンツが表示されます。これで問題は解決できます。この読み込み効果はユーザーの閲覧時間を消費しますが、それをより美しく興味深いものにすることができるため、ユーザー エクスペリエンスには影響しません。この記事では、このアイデアを実装し、実装が簡単で機能も貧弱ではない非常にシンプルな画像プリロード コンポーネントを提供します。モバイル ページを作成する際には参考になるはずです。

効果 (img_loader.rar):

1. 実装アイデア

HTMLのimgタグとCSSのbackground-imagは、ブラウザに関連画像をロードさせますが、これが画像がロードされると、ブラウザはロードされた画像を直接使用して、ページ上に即座にレンダリングできるようにします。 JavaScript を使用して Image オブジェクトを作成し、これらのオブジェクトの src 属性をロードする画像のアドレスに設定します。これにより、ブラウザが画像をロードするようにトリガーすることもできます。これを使用して、画像のプリロード機能を実現します。最初に使用します。ページに関連する要素は、画像の要素を非表示にしてから、js を使用して画像を読み込み、すべての画像が読み込まれるまで待ってから、非表示の要素を表示します。ただし、これは単なる基本的な実装のアイデアであり、より堅牢な機能を備えたプリロード コンポーネントを完成させるには、まだ次の 3 つの問題があります:

1) 進捗の問題

プリロードのため、プリロード効果を実行する必要があり、これにはリアルタイムが必要です。読み込みの進行状況を外部コンテキストに通知します。進捗には 2 つの実装方法があり、1 つはロードされたデータ サイズ / 総データ サイズ、もう 1 つはロードされたファイル数 / 総ファイル数です。最初の方法を使用するのは現実的ではありません。はネイティブな方法ではないため、2 番目の方法のみを使用できます。

2) 画像の読み込み失敗の問題

例えば、4つの画像があり、そのうちの50%が読み込まれており、3番目の画像を読み込むときにエラーが発生します。進行状況を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です。この効果について説明する必要がある問題が2つあります:

1) 以前のブログを使用して、カルーセル原理をhammer.jsと組み合わせて使用​​し、シンプルなスライディング スクリーン関数の実装 イントロダクション スライディング スクリーンのアイデアは swipe.js にラップされており、そのロジックの一部は swipe.js にパッケージ化されています。このモジュールには、外部にグローバル変数 Swipe を提供するための init メソッドがあります。外部のスライディング スクリーン関連関数は、Swipe.init() 関数を呼び出すことで初期化できます。この init メソッドは、js のロード後にスライディング スクリーン関数を初期化します。ロードが完了するまで遅延されます。 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 中国語 Web サイトの他の関連記事を参照してください。