ホームページ > 記事 > ウェブフロントエンド > jQuery が画像のプリロード関数を実装する方法
最近、JavaScriptを使ってアニメーション機能を作りたいと思っています。アニメーションをスムーズにスムーズに再生するために、使用する画像素材をプリロードする必要があります。この機能を実装するプロセスを共有します
単一イメージのプリロード
最も一般的な実装方法は次のとおりです
function preloadImg(url) { var img = new Image(); img.src = url; if(img.complete) { //接下来可以使用图片了 //do something here } else { img.onload = function() { //接下来可以使用图片了 //do something here }; } }
まず、Image オブジェクトをインスタンス化します。値を img に設定し、img.src をパラメータ url で指定された画像アドレスに設定し、img の完全な属性を決定します。この画像のローカル キャッシュがある場合、値は true になります。この時点で、このイメージを直接操作します。ローカル キャッシュがない場合、値は false です。このとき、img の onload イベントを監視し、img に対する操作を onload コールバック関数に入れる必要があります。テスト後のこの解決策は、基本的に次のとおりです現在のすべてのブラウザと互換性
複数の画像のプリロード
アニメーションなどの関数には通常、多くの機能が含まれるため、多くのシナリオでは、単一の画像のプリロードではニーズを満たすことができません。次に、元の単一画像のプリロードに基づいて機能を改善します
function preloadImg(list) { var imgs = arguments[1] || [], //用于存储预加载好的图片资源 fn = arguments.cal lee; if(list.length == 0) { return imgs; } var img = new Image(); img.src = list[0]; if(img.complete) { imgs.push(img); list.shift(); fn(list, imgs); } else { img.onload = function() { imgs.push(img); list.shift(); fn(list, imgs); }; } } var list = [......], //此处省略一万个字符 imgs = preloadImg();
フレーム アニメーションでは、アニメーションの各フレームで使用される画像の順序を保証する必要があるため、このコードでは再帰を使用しますこのメソッドでは、前のピクチャがロードされた後に次のピクチャをロードします。ピクチャがロードされるたびに、ピクチャ リソースが imgs 配列に格納され、このピクチャのアドレスがアドレス配列リストから削除されます。リスト内で、再帰から抜け出して imgs 配列を返します。
アイデアは美しいですが、現実は残酷です。このコードには耐えられない問題が 2 つあります。
まず第一に、私はおそらくそうでしょう。ローカルにキャッシュされていない画像がある限り、imgs の保存操作は onload コールバック イベントに配置され、イベント監視も JavaScript の非同期操作の一種であるため、最後に返された imgs 配列は取得できません。 onload イベントのバインディング コールバック関数の後、preloadImg 関数は戻り値なしで終了します 外部 imgs 変数が受け取る値は未定義です すべての画像がローカル キャッシュを持つ場合にのみ、外部 imgs 変数はすべてのプリロードされた画像を正常に取得できます画像リソースの配列
1 つの画像をロードしてから次の画像をロードすると、画像のプリロード プロセス全体に比較的長い時間がかかり、ユーザー エクスペリエンスが低下し、元の非同期操作が特殊になります。この実装方法は、onload 非同期機能を完全に放棄するのと同じです。
複数画像のプリロード (改良版)
今回は、空の配列を直接配置します。がパラメータとして関数に渡され、すべての画像がこの配列に格納されます。以下は改良された関数コードです (jQuery を使用できると仮定しています)
function preloadImg(list,imgs) { var def = $.Deferred(), len = list.length; $(list).each(function(i,e) { var img = new Image(); img.src = e; if(img.complete) { imgs[i] = img; len--; if(len == 0) { def.resolve(); } } else { img.onload = (function(j) { return function() { imgs[j] = img len--; if(len == 0) { def.resolve(); } }; })(i); img.onerror = function() { len--; console.log('fail to load image'); }; } }); return def.promise(); } var list = [......], //此处省略一万个字符 imgs = []; $.when(preloadImg(list, imgs)).done( function() { //预加载结束 //do something here } );
onload コールバック関数を各 img に個別にバインドする場合クロージャを使用する目的は、現在のインクリメント変数 i を保存することです。これが行われない場合、ローカルにキャッシュされていないリスト アドレス内の画像が imgs
## の最後の要素に保存されることになります。 # 今回は画像がロードされるたびに、リスト配列から画像のアドレスを削除しないので、後でリスト配列のデータを使用する必要があるときに、正常に取得できます。このコードでは、jQuery の Deferred オブジェクトを導入しました。これにより、画像をプリロードするプロセス全体を簡単に把握できるようになります。以上がjQuery が画像のプリロード関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。