3

flickr のフォトストリーム機能によく似たスクリプトを作成しました。2 つのサムネイルが隣り合っており、次または前のリンクをクリックすると、次の (または前の) 2 つの画像がスライドインします。

現在、ページが読み込まれると、2 つの画像が読み込まれます。初めて nxt / prv を使用すると、次の 2 つの画像または前の 2 つの画像が ajax 経由で読み込まれ、最初の画像の ID が URL で渡され、2 つの新しい画像の HTML が返されて ajax 経由で表示されます。

十分に単純ですが、接続が遅い場合、またはサーバーの負荷が高い場合は、2 つの画像を考えるようになりました。ただし、比較的小さなサムネイルはまだ読み込みに時間がかかる可能性があります。ロードの遅延なしで、迅速かつスムーズにスライドします。

したがって、パフォーマンスと優れた実践の観点から、どのオプションが最適かを考えていました。

1、JSON経由で画像の各セットを呼び出します（高速であると思われますか？）

2、可能なすべての画像をjsonファイルにロードし、その方法で詳細を取得します-ただし、ブラウザはまだ画像をロードする必要があります. さらに、画像が 4 枚ある場合もあれば、最大 1000 枚ある場合もあります。

3. php 経由で 10 個の画像を Json またはその他のファイルに読み込み、10 個の画像すべてをブラウザーに読み込みます。表示されていない 8 個を非表示にし、常に中央の 2 個を表示します。ここでの問題は、誰かがクリックするたびに、ファイルが最初と最後の画像をリロードする必要があることです。これにはまだ時間がかかりますが、中間の画像はすべてブラウザ経由でキャッシュされていると思います. しかし、まだロード時間があります。

4、すべての画像の詳細（数値に関係なく）を含むjson画像を作成し、上記の3を使用して10行の画像をロードすることは可能ですか、ajaxを使用して10行のみを読み取り、最後のポインターを保持することは可能ですか読み込まれたものなので、jsonファイルを高速にロードでき、短時間でリフレッシュでき、画像の両側がブラウザを介してキャッシュされます!!

それが明確であることを願っています。これをどのように処理するかについて何か提案はありますか?

4

4 に答える 4

19

Javascript から画像をプリロードするために、AJAX や JSON のようなことをする必要はありません。必要なのはこれだけです：

var img = new Image();
img.src = "http://example.com/new/image.jpg";

ブラウザは、画像がどこにも表示されていなくても、バックグラウンドで問題なくロードします。次に、別の (表示されている) 画像タグのフィールドを更新するsrcと、ブラウザーは既に読み込まれている画像の一部 (できればすべて) をすぐに表示します。

于 2008-11-02T23:47:11.747 に答える
1

Ajax 経由で JSON をフェッチすると、速度が低下します。

インライン JSON と生成された Javascript を使用することをお勧めします。

 <?php 
       $images = array( "foo.jpg","bar.jpg" ); 
 ?>
 <script type="text/javascript">
   jQuery(function($){
       var images = ( <?php echo json_encode($images); ?> ); 
       /* Creating A Hidden box to preload the images into */
       var imgbox = document.createElement("div"); 
       $(imgbox).css({display: 'none'});
       /* Possible Alternative trick */
       /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */
       $('body').append(imgbox);

       $.each( images , function( ind, item ) 
       {
          #Injecting images into the bottom hidden div. 
          var img = document.createElement("img"); 
          $(img).src("/some/prefix/" + item ); 
          $(imgbox).append(img);
       });
    }); 
 </script>
于 2008-11-02T23:52:41.300 に答える
0

テキストを使用して、テキストを画像コードに置き換えてみませんか (php で動作し、最大 500 個の画像などを ajax で処理できます)。

于 2009-09-18T23:11:19.680 に答える