jqueryの背景画像変更

Question

私の上司は、ウェブサイト上でこれを見ている

：あなたはアルバム全体に行くように画像がどのように変化するかhttp://event.photoswarm.com/

注意してください。これの欠点は、すべてのサムネイル画像が最初にダウンロードされなければならないことです。

イメージを少し読み込んでいるときに、私が仕事に似た何かを得る方法はありますか？

私は推測する問題がある：

1. は、画像が少しクリーナーをロードしてください
2. は彼らが200枚の以上の写真
3. 使用jQueryプラグイン持つことができ、より良いアルバムの一部としてロードしてください - これを写真の群れによって作られたようだと私はそれを盗んだ場合、あまりにも魅力的ではないと思う！

何かを作る方法がある場合、誰かが無料のプラグインを知っていればダウンロードすることができます。あなたは要素やリソースを調べる場合

Answer 1

あなたはこれを見つける：

http://static.photoswarm.com/js/app_user.js

それはjQueryとprototype.jsの

Answer 2

あなたは、アレイ内のすべての画像の位置を保存することができ使用しています。次に、それらの上にマウスを置いたときに画像をロードするだけです。

var images=new Array("image1.jpg","image2.jpg","image3.jpg", 'image4.jpg"); 

Answer 3

私はあなたの画像を撮影し、これはあなたのイメージのうち、すべてのunneceseary情報を削除し、ヤフーのツールSmushItを経て最初にすべてのことをがどんな考えます。 それから私はあなたがその特定のアルバムにしたい画像のリンクを持つ配列を初期化します、その後、単に

`.mousemove(function(){ 
    set Timeout(function(){ 
     //code goes here 
    },1000) 
    })` 

（例えばDIVすることができる）指定されたアルバムで

とによりを追加しますあなたはその配列を実行し、その配列からあなたのリンクを使ってそのdivの "背景イメージ"を単に変更することができます。 おそらく、そのアクションにsetTimeout（）を追加して、これが速く実行されないようにする必要があります。 .hover()を選択すると別の選択肢がありますが、これが要件に合っているかどうかはわかりません。

Answer 4

は、私は私はこの1つに答えた場合、私は疑問:)まず

のコードの原作者よ、私たちはこの質問ですが、あなたが（コードを服用して[OK]をしているとして、それが最善かもしれないと思いますあなたがすでに持っているので、私たちは現時点で大きなリライトの途中にあり、このコードはその一部として償却されています）。

Fabiánにリンクされているファイルには必要なコードが含まれていますが、それ以外のサイトのコードもたくさん含まれています。あなたが望むビットは実際にはかなりシンプルですが、いくつかの異なることが続いています。このファイルには、PS.CoverLoaderクラスがあります。

まず、ページのすべてのサムを取り出し、バックグラウンドで読み込みを開始します。彼らがすでにロードされていると仮定しましょう。

フリッキングは非常に簡単です - 私はちょうどそこにjsを持っているので（私はおそらくjqueryを使用しています）、擬似コードを使用します。

create array of all images for album 
attach to album mousemove 
on move find x position of the mouse 
translate that to a position in your array 
    segment_size = album_width/img_count 
    segment = Math.floor(offset/segment_size) 
switch album displayed image to be array[segment] 

多くの画像の読み込みに関するその他の点では、それは問題です。このシステムは、ページのすべてのサムを読み込みます。非効率的です - 一部のページは10/100sのMBです。私たちは、すべてのサム（イメージスプライト）を含むアルバムごとに1つの長いイメージを作成しようとしましたが、この多くの異なるイメージでは実際には機能しません。

私の提案は、特定のアルバムのすべての画像を最初のホバーに読み込み、それをjsの配列に保存することです。