0

私たちのサイトは画像が多いので、画像が読み込まれる順序が重要です。

JS の 1 つが<link type="text/css" ...>CSS のタグを挿入し、続いてタグを挿入していくつかの画像をプリロードし<img>ます。問題は、CSS によって参照される画像をプリロードされた画像の前にロードすることですが、それは起こっていません。CSS、プリロードされた画像、CSS によって参照される画像をダウンロードします。

タイムアウトを設定する以外に何ができますか? （人によっては短すぎたり、長すぎたりします）

4

1 に答える 1

2

一般に、javascript によってロードされるものを制御できます。あなたの問題は、動的にロードされた css の準備が整ったときに正確にわからないため、いつ何をロードするかを決定できないことです。

一部のブラウザーは、動的に読み込まれた css の準備ができたときに on-load イベントを発生させますが、このアプローチには問題があります。私は自分で良い解決策を探すのに数時間を費やしました。以下は、ownCloud システム用のアプリである「FluXX Compensator (Y)」で思いついたものです。

OC.FluXX.transitions=$('<link/>',{
    'rel':'prefetch',
    'type':'text/css',
    'href':OC.filePath('fluxx_compensator','css','transitions.css')

toggle: function(handle){
    // temporarily include transition style rules if not yet present (should not be!)
    var transitions=OC.FluXX.transitions.clone().attr('rel','stylesheet').attr('id','fluxx-transitions').appendTo('head');
    // some safety catch for browsers that do not fire the load event when stuff is loaded (safari)
    var timer = setTimeout(function(){$('head #fluxx-transitions').off('load');OC.FluXX.time(handle);},500); // should be preloaded...
    // the more elegant approach however is to react on the load event (_if_ fired)
    $('head #fluxx-transitions').one('load',function(){clearTimeout(timer);OC.FluXX.time(handle);});
} // OC.FluXX.toggle

ご覧のとおり、css リソースへの参照を表すオブジェクト (ページの読み込み時に定義) を複製します。ネットワーク経由でロードするのではなく、必要なときに（私の場合は数回）クローンを作成して削除するだけでよいように、プリロードします。このクローンを文書の先頭に配置します。安全キャッチとしてタイマーをセットアップしましたが、オンロード イベントに反応しようとしました。そのイベントが発生しない場合 (たとえば、MS-Windows の Safari では発生しない場合)、少なくともタイムアウトがキャッチされます。これは、私が見つけた高速反応 (イベント駆動) と安全性 (タイムアウト) の最良の組み合わせです。これまでのところ正常に動作します...

お役に立てれば ;-）

于 2013-08-08T19:37:11.210 に答える