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

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

1. 実装アイデア

HTML の img タグと CSS の background-imag は、ブラウザに関連する画像をロードするようにトリガーします。ただし、画像がすでにロードされている場合、ブラウザはロードされた画像を直接使用するため、画像をレンダリングできます。瞬時にページを表示します。 JavaScript を使用して Image オブジェクトを作成し、これらのオブジェクトの src 属性をロードする画像のアドレスに設定します。これにより、ブラウザが画像をロードするようにトリガーすることもできます。これを使用して、画像のプリロード機能を実現します。最初に使用します。ページに関連する要素は、画像の要素を非表示にしてから、js を使用して画像を読み込み、すべての画像が読み込まれるまで待ってから、非表示の要素を表示します。ただし、これは単なる基本的な実装のアイデアであり、より堅牢な機能を備えたプリロード コンポーネントを完成させるには、まだ 3 つの問題があります:
1) 進捗の問題
プリロードは同時に行われるため、プリロード コンポーネントは次のことを行う必要があります。その結果、読み込みの進行状況を外部コンテキストにリアルタイムで通知する必要があります。進行状況を実装するには 2 つの方法があります。1 つはロードされたデータ サイズ/合計データ サイズであり、2 つ目はロードされたファイル数/合計ファイル数です。最初の方法を使用するのは現実的ではありません。はネイティブな方法ではないため、2 番目の方法のみを使用できます。
2) 画像の読み込み失敗の問題
例えば、画像が 4 つある場合、そのうちの 50% が読み込まれ、3 番目の画像の読み込み時にエラーが発生し、進捗が 75% にフィードバックされるべきです。 ?答えは「はい」です。これを行わないと、進行状況が 100% に達することはなく、ページのメイン コンテンツが表示されなくなります。画像の読み込みが失敗する可能性がありますが、画像自体は失敗する可能性があります。存在しないのですか？これは、イメージの読み込みの失敗がローダーの機能に影響を与えないことを意味します。
3) 画像読み込みタイムアウトの問題
画像を長時間読み込むことができません。そうしないと、ユーザーは読み込み中のままになり、メインコンテンツが表示されなくなり、ユーザーの待ち時間が制御不能に延長されます。これは、ローダーの本来の意図に反します。したがって、すべての画像のタイムアウト後に読み込みが完了しない場合は、読み込みタイムアウトを画像ごとに設定する必要があり、読み込みは積極的に中止され、読み込みが完了したことが外部コンテキストに通知され、メイン コンテンツが更新される必要があります。表示されます。
上記の要件に基づいて、この記事で提供される実装は次のとおりです。

JavaScript コードコンテンツをクリップボードにコピーします

1. (関数 () {
2. 関数 isArray(obj) {
3. return 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. callback = typeof(callback) === 'function' && callback;    
14. var total = imgList.length,
15. ロード済み = 0,
16. 画像 = [],
17. _on = 関数 () {
18. 読み込み済み < total && ( ロード済み, コールバック && コールバック(ロード済み / 合計));    
19. };    
20. if (!total) {
21. return コールバック && コールバック(1);    
22. }
23. for (var i = 0; i < total; i ) {
24. 画像[i] = 新しい Image();    
25. imgages[i].onload = images[i].onerror = _on;    
26. imgages[i].src = imgList[i];    
27. }
28. /**
29. * タイムアウト * 合計時間範囲内に取り込まれていない静止画がある場合 (判定条件が読み込まれている < 合計) 場合、すべての写真を取り込んだことを外部環境に通知します
30. * ユーザーが長時間待たされるのを避けることが目的です
31. */
32. setTimeout(関数 () {
33. 読み込み済み < total && (loaded = total, callback && callback(loaded / total));    
34. }、タイムアウト* 合計);    
35. };
36. "関数" === typeof 定義 && 定義.cmd ? >関数 () {
37. リターン ローダー
}) : window.imgLoader = ローダー;
38. })();
39. 使用法 (コード内の test.html に相当):

XML/HTML コード

コンテンツをクリップボードにコピー

<

スクリプト

1. src="../js/ imgLoader.js">スクリプト> <
スクリプト
2. > imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){
console.log(パーセンテージ)
});
スクリプト
6. > 実行結果:

2. デモの説明

この記事の冒頭で示した効果、対応するページはindex.htmlです。必要な問題が 2 つあります。この効果について説明します:
1) 以前のブログで紹介したスライディング スクリーンのアイデア Hammer.js カルーセルの原理を使用して、単純なスライディング スクリーン関数 を実装し、そのロジックの一部をスワイプでラップします。 js では、グローバル変数 Swipe を外部に提供しています。このモジュールには、Swipe.init() を呼び出すことで外部からスライディング スクリーン関連の関数を初期化できるようにするための init メソッドが用意されています。 js がロードされた後に初期化されます。この init メソッドを使用すると、ロードが完了するまでスライディング スクリーン ロジックを遅延させて初期化することができます。 index.html は合計 5 つの js を参照します:

XML/HTML コードコンテンツをクリップボードにコピー

1. <script src="js/zepto.js ">スクリプト>
2. <script src="js/ transition.js">スクリプト>
3. <script src="js/ Hammer.js">スクリプト>
4. <script src="js/ imgLoader.js">スクリプト>
5. <script src="js/ swipe.js">スクリプト>

そのうちの imgLoader.js は前の中間画像追加プログラムであり、前の 3 つの js は最後の swipe.js サービスです。スライディング機能は関連する内容を理解しています。スライディング スクリーンはここでは重要ではありませんが、swipe.js がここでの内容の理解に影響を与えることはありません ~
2) デモでは 3 倍の大きな画像を使用しましたが、この環境では、追加速度も非常に速いため、最初の時点では、事前に追加された効果が見られ、最終的には、すべての回を繰り返す前に次の延長を行うだけで、最初のgif画像を最初から見ることができます読み込み効果、実行方法:

XML/HTML コード复制コンテンツ到剪贴板

1. //模拟加ダウンロード遅い效果
2. var コールバック = [];    
3. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {
4. var i = コールバック.length;    
5. callbacks.push(function(){
6. setTimeout(function(){
7. var percentT = パーセント * 100;    
8. $('#loader__info').html('Loading ' (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. });   

真の環境では、最も良いのは不要な刻意を取り除くこのような延長、不要な追加ダウンロード効果、就浪费它不必要な待機時間、したがって真の環境はこのための次の代金コードです：

XML/HTML コード复制コンテンツ到剪贴板

1. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {
2. var percentT = パーセント * 100;    
3. $('#loader__info').html('Loading ' (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 プラグインがありますが、その考え方や実装のポイントについてはさらに学ぶ価値があります。時間があるときに調べてください。同時に、スクリプト ハウス Web サイトを引き続きサポートしていただきありがとうございます。