javascriptを使用しているフォルダ内の画像ファイルの数を確認してください

Question

こんにちは、私は問題を抱えています。だから、私は表示する必要があり、私はこれらの画像を表示するためにJavaScriptを使用していた画像が含まれているこのフォルダがあります。すべての画像の名前はSlidex.PNGとなります。ここで、xはスライドの番号です。私はこれまでのところ、それは、これまで取り組んでいる

var baseUrl = "{{ asset($chkdir) }}/"; 
     alert(baseUrl); 
     var pictureIndex = 1; 

     function next() 
     { 

      var image_url = baseUrl + 'Slide' + pictureIndex + '.PNG'; 
      document.getElementById("viewer").src = image_url ; 
      pictureIndex++; 
     } 

ありましたが、私の問題はSlide5.PNGが、それはまだ壊れた画像Iを表示するSlide6.PNGをロードした後、私はフォルダ内の5つのイメージを持って、たとえば言うことは何か フォルダ内の画像ファイルの総数を取得する方法があるかどうかを知りたがっています。どんなアドバイスですか？前もって感謝します！

Answer 1

あなたがテストにオフスクリーン/バッファイメージを持つことができますあなたのページ要素にURLを割り当てる前に、新しいURLの画像を探します。ロードが失敗した場合、srcが割り当てられないようにして、今後のロード試行を防ぐことができます。

また、バッファイメージを使用すると、イメージがブラウザによって既にダウンロードされているため、新しいURLがダウンロードされている間にイメージがページに表示されることはありません。この例では

、私はあなたが繰り返しnext()を呼び出すためにタイマーを使用していると仮定しました：

var pictureIndex = 1; 
var baseUrl = "{{ asset($chkdir) }}/"; 
var image_url = undefined; 
var timer = setInterval(next, 5000); 

var tester = new Image(); 
tester.onload = imageFound; 
tester.onerror = imageNotFound; 

function next() 
{ 
    image_url = baseUrl + 'Slide' + pictureIndex + '.PNG'; 
    tryLoadImage(image_url); 
} 

function tryLoadImage(url) { 
    tester.src=url; 
} 

function imageFound() { 
    document.getElementById("viewer").src = image_url; 
    pictureIndex++; 
} 

function imageNotFound() { 
    // perform some function to stop calling next() 
    clearInterval(timer); 
} 

Answer 2

APIここで、データに画像へのパスがあり、サーバーはこのカウントを行い、ユーザーに送信します。またはテンプレートを使用することもできます。この場合、サーバーはすべてのファイルと画像パスでHTMLを提供します。

PHPのテンプレート例：

<img src="<php>print(imagePath);<?php>"> 

私はあなたが何をしているかわかりませんが、それはサーバー側の作業ですので、私は、良い練習することを考慮していないとあなたがクライアント上でそれをやっています制限がたくさんあります。

しかし、イメージが壊れたりされていないかどうかを確認するためにどこjavascriptのチェックファイルのサイズこの質問に見てみましょう： Determining image file size + dimensions via Javascript?