js 画像の読み込みに関すること onload_javascript スキル

まず私の目的を明確にさせてください:

ユーザーがページに入ったら、読み込みアイコンを表示し、最大の画像が読み込まれるのを待ってから、画像を不透明にします。

関数は非常に単純ですが、問題は、完全に完了していないことです。

それを行うとき、私は自然に次の方法を初めて思いつきました:

コードをコピーコードは次のとおりです:

$(function(){
$('.banner img').load(function(){
console.log('alreadyloaded')
} );
});

古いことわざにあるように、自信が過剰に高まると、最終的には大きな打撃を受けることになります。これで十分だと思い、それを上司に見せました。転送を読み込んでいないと2回繰り返しましたが、出ないはずだと言いましたが、実際に試してみました。

その後、情報を検索したところ、これがキャッシュの原因であることがわかりました。ロード時に、キャッシュが原因でブラウザがロード イベントをトリガーしないためです。

コードをコピー コードは次のとおりです:

window.onload=function(){
コンソール .log('ロード済み')

};

ふふ、これでダメだったら褒めてあげる、それでまた自信が打ち砕かれたので上司に相談すると、大丈夫だと言われました。 「ページが読み込まれていないのに、読み込みが延々と続いている」と私は無言で答えました。「インターネットの速度が遅すぎるのでしょう。」 。 。あなたは待っていましたが、しばらくして彼はこう答えました。「これはできませんが、待ち時間が長すぎます。

」

仕方なく、さまざまな方法で画像を圧縮することしかできませんが、圧縮後もまだ理想的ではないと感じたので、プロジェクトはスペースに放り込まれるだけで、非常に時間がかかります。 . ネットワークだと速度が遅くなり、当然ロード時間も遅くなります。

上司はそう言ったのですが、まだタスクは完了していませんでした。私は頭を悩ませていたところ、偶然海外の Web サイトでカルーセル画像の JQ プラグインを見つけてソースコードを見てしまいました。そこで次のトリックが生まれました:

コードをコピー コードは次のとおりです。

var oImg = $('.banner img :eq( 0)');
oImg.attr('src') '?' (new Date()).getTime();
oImg.load(function(){
console.log ('すでに読み込み中')
});

テスト後、これは正常であることを意味します。これは、ページに入るときに画像のアドレスに時間を追加し、画像がロードされるたびにキャッシュが存在せず、画像が 1 つだけロードされることを意味します。画像が読み込まれたら、その後は何も気にしません。

修正後、上司に内緒でアップロードしましたが、今回は油断できなかったのでテストを続けたところ、今度は問題がなくなったことがわかりました。

ページがロードされるたびに画像パスが異なるため、毎回ロードされ、消費される時間は最初のロードと同じになります。これは、その後 1 回ロードする必要があるという意味ではありません。それを入力しますか？

めまいがする....

数十回の試みの後、私は最終的に上記のすべての方法を無効にする方法を見つけました:

コードをコピー コードは次のとおりです:

function imgloading(){

console .log( 'すでにロードされています')
}
//ページ呼び出し

これにより、画像のキャッシュの問題が解決され、ロード イベントは引き続きトリガーされますが、これはまだページの読み込みが原因であると他の人から聞きました。 ご存知のとおり、Web ページは上から下に読み込まれます。img に読み込むとき、img 要素を準備できません。img を渡した後、現在の img は読み込みが完了したことを示します。ロードされているので、すべてロードされていると思いますが、それでもロードを導入することは役に立ちますか？

上記のメソッドから、ページが img にロードされるときに onload メソッドに遭遇し、この画像が表示される前にロードする必要があることを認識することは難しくありません。

わかりました。 。 。この種の問題に遭遇し、これよりも完璧な解決策を見つけた同僚がいるかどうかはわかりません。 。もっと完璧な方法がある場合は、必ずメッセージを残してお知らせください。いつもありがとうございます。 。 。