php / Ajax-画像をプリロードするためのベストプラクティス

StackOverflow https://stackoverflow.com/questions/257550

質問

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

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

十分にシンプルですが、遅い接続、または重いサーバー負荷で2つの画像を考えるようになりましたが、比較的小さなサムネイルの読み込みにはまだ時間がかかる可能性があり、スライドペインの良いところは非表示のデータは、読み込みの遅延なしにすばやくスムーズにスライドインします。

だから、パフォーマンスと優れた実践の観点から、どのオプションが最適か疑問に思っていました。これは今のところ考えられることであり、提案を受け入れます。

1、JSON経由で各画像セットを呼び出します（高速ですか？）

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

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

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

希望を明確に、これをどのように処理するかについての提案はありますか？

役に立ちましたか？

解決

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

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

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

他のヒント

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>

より多くのリソースを同時にプリロードしたい場合、小さなajaxで問題を解決できます。ブラウザが次のリクエストでリソースを使用するようなキャッシングヘッダーであることを確認してください。次の例では、最大4つのリソースを同時にロードします。

<script>
var urls = [
  "a.png",
  "b.png",
  "c.png",
  "d.png",
  "e.png",
  "f.png"
];

var currentStep = 0;
function loadResources()
{
  if(currentStep<urls.length){
  var url = urls[currentStep];
  var req = GetXmlHttpObject();
  update('loading ' + url);
  req.open("GET", url, true);
  req.onreadystatechange = getUpdateState(req, url);
  req.send(null);
} else {
  window.location = 'done.htm';
}
}

function getUpdateState(req, url) {
  return function() {
    var state = req.readyState;
    if (state != 4) { return; }
    req = null;
    setTimeout('loadResources()', 0);
  }
}
</script>

<!-- This will queue up to four concurrent requests.  Modern browsers will request up to eight images at time  -->
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">

テキストを使用せず、テキストを画像コードに置き換えないのはなぜですか（PHPで最大500枚の写真などでAJAXを使用すると非常に便利です）。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top