スクリプトの前に画像を読み込む

私はすべてのページの背景画像のサイズを変更するためのスクリプトを持っています。多くのコンテンツ(他の画像)を背景にして、より遅いマシンやページが伸びることがあります。

私はこれを持っていた

$(document).ready(function() {
    ...code for resizing the image...
});

私は画像(id img_bgを持つ)がロードされた直後に実行されるコードを次のように決定しました。

$("#img_bg").ready(function() {
  ...code for resizing the image...
});

私はより良い結果を得ましたが、私が望むようにまだ完璧ではありません。

誰にも他のアイデアはありますか?

ありがとう

2

2 答え

jqueryのドキュメント[1] .ready()は実際に要素が完全に読み込まれた後にのみ実行されます。 だからあなたの問題は、あなたのサイズ変更スクリプトが仕事を終えるまで、セラーティンタイムがあるかもしれません。 (特に他のものが同時に処理される場合)これを解決する1つの方法は、サイズ変更が完了するまで画像を隠すことです。 スケーリング方法の最後に show [2]関数を使用し、CSSの #img_bg で最初に display = "none" その目的。

しかし、全体の設定について考える必要があります。大きな画像を読み込んだり、小さめの画像しか使用しない場合はjavascriptで置き換えてください。それから、最初は小さいものを持つほうがいいかもしれません(バンド幅を節約して読み込み速度を上げるため)

もう1つの考えは、このサイズ変更がjavascriptではなくcssの巧妙な使い方で実現できる可能性が高いということです。しかし、あなたはあなたのスクリプトが実際にどのように動作するのか、それが何をしているのか、さらに詳細を述べなければならないでしょう。

[1] http://api.jquery.com/ready/

[2] http://api.jquery.com/show/

2
追加された
説明してくれてありがとう。非常に便利。 CSSで画像のサイズを変更することについて私はすでに過去に試みたが、javascriptと同じように成功した。それは、ブラウザの幅と高さの値を比較し、画像の幅や高さを調整することです。その後、イメージの中心をブラウザキャンバスの中心に置き、最後にwindow.resize関数を呼び出します。私はすぐに私のコンピュータに私はあなたのヒントと、サイズ変更後の画像が表示されることをお試しになるでしょう。どうもありがとう
追加された 著者 peterK,

div/htmlコントロールの直後にjavascriptコードを配置すると、コントロールが準備できたら実行されますが、「準備完了」ステートメントは必要ありません。

document.readyは、単にすべてのHTMLがロードされていることを示し、DOMで何かを行うことができますが、ページ全体が準備される前に要素を変更することができます。

0
追加された
しかし、ウェブサイトのすべてのページには、画像のサイズを変更する機能が必要です。この機能は3-5行ではなく、約40行あります。私はそれがすべての単一のページにすべてのコードを置くことは非常に正しいとは思わない。ありがとう
追加された 著者 peterK,