javascript imageオブジェクトについて

システム初心者です。よろしくお願いします。
現在javascriptを使ってimageオブジェクトで画像を読み込んで表示するプログラムを作っています。
html側
<img src="loading.gif">
<img src="" style="display:none;">
js側
function yobidashi(yousoid,url){

var previewImg = new Image();

previewImg.onload = function(){
document.getElementById(yousoid).src = url;
document.getElementById(yousoid).style.display = "block";
}
previewImg.onerror = function(){
console.info('error');
}

previewImg.src = url;

}

とやりたいのですが、画像が置いてあるフォルダにはページ読み込み後に画像がドロップされます。
処理としてonloadにいったりonerrorにいったりとなってしまいます。

どうすれば適確にonloadで読めるようになるでしょうか？

質問者からの補足コメント

• 説明不足ですいません。
  
  html側に
  <script>yobidashi('sample','test/123456.jpg');</script>
  
  上のtestフォルダにサーバー側のプログラムがjpg画像をドロップします。
  previewImg.srcで一度onerrorの方にいってしまいonerror内で再度yobidashiをリトライして、testフォルダに【123456.jpg】があってもonerrorの方にいってしまいます。

    補足日時：2016/06/01 09:18

No.1 回答者： yambejp 回答日時： 2016/05/31 17:35

この場合yobidashi()は、いつどこで呼んでるのでしょう？

previewImg.onloadでパラメータをいじる理由はなんでしょう？
またpreviewImgはどこへ影響したいのでしょう？

No.2 回答者： fujillin 回答日時： 2016/05/31 17:45

こんにちは。

状況設定がよく理解できていませんが…

＞画像が置いてあるフォルダにはページ読み込み後に
＞画像がドロップされます。
画像が入れられたタイミングをスクリプトから感知できる仕組みが何らか存在するのなら、単純に、その後に読み込みにいくような制御をすればよいと思います。

スクリプト側からはタイミングがわからない場合は、ひたすら成功するまで（＝読み込めるまで）繰り返すしか方法がないと思います。
しかし、いつ読めるのかわからない（永遠に読めないのかも知れない）画像を何度も読み込もうとトライする仕組みって、なんだか効率が悪すぎるような気もしますが…
urlが固定（？）でわかっていて（スクリプトに記述されているのでしょうから）、対象が（意図的に？）存在しない状況ってよくわからないですね。

・・・といった疑問は置いておいて、
具体的には、成功したらわかるようにフラグを用意しておいて、フラグがたってない間は、一定時間後に再度読込を行うような制御にしておけば一応動作すると思います。
読み込みのループが永遠に止まらないのも何なので、念のため、時間制限等を設けておいて、一定時間読み込めなければストップするようにしておいた方がよさそうに思います。

ご質問の内容とは、関係ありませんけれど・・・
previewImgとid付の要素を用いていらっしゃいますが、結局、同じ対象を読み込もうとしているので、あまり使い分ける意味もなさそうに感じます。

No.3 回答者： yambejp 回答日時： 2016/06/01 11:49

ちょっと試してみましたが

<script>
window.onload=function(){
var previewImg = new Image();
previewImg.src="hoge.jpg"; //(※)
previewImg.onload = function(){
console.log("load");
}
previewImg.onerror = function(){
console.log("error");
}
console.log("end");
}
</script>

(※)のところ、存在しないファイルを指定した場合と、
存在するけど画像ではないファイルを指定した場合はエラーになりました
逆に存在する画像ファイルを指定した場合、多少遅延があっても
ロードのほうが選ばれるようです（10秒ほど待たせましたが大丈夫でした）

そのあたりを踏まえて再確認してみてはどうでしょうか？

No.4 回答者： fujillin 回答日時： 2016/06/01 12:55

ANo2です。

ANo2で説明した方法で、あとから手動で画像ファイルを放り込むことで試してみましたが、予想通りに動作するようです。
しかしながら、ANo2にも書きましたように、この処理方法ってあまりほめられたものではないように感じます。
スクリプト云々よりも、全体のフローを考え直した方がよろしいのではないでしょうか？

＞html側に
＞<script>yobidashi('sample','test/123456.jpg');</script>
このURLは固定のURLなのでしょうか？
それともサーバから可変で出力されるものなのでしょうか？

＞上のtestフォルダにサーバー側のプログラムがjpg画像をドロップします
サーバから上記のURLを返して（出力して）おいてから、画像を出力しているのなら、順序を逆にするだけでjavascriptで後読みする必要がなくなりませんか？

＞previewImg.srcで一度onerrorの方にいってしまいonerror内で再度
＞yobidashiをリトライして、testフォルダに【123456.jpg】があっても
＞onerrorの方にいってしまいます。
私がざっと試した時も、ローカル環境でIE（ver11）では似たような事象が発生しました。
原因は調べていませんが、fxでは発生していません。
一方で、いずれのブラウザもサーバ環境であれば予定通りに動作しました。