ちょうど楽しみのために、私は "15 puzzle"を実装しようとしていますが、16イメージ(1つの音楽写真から)を代わりに使っています。HTML Imgのロードに失敗しました
物は2つのスクリプト/側に分割されています。 1 Last.FMクエリ+ Y x Zチャンクで画像を分割するPython CGIスクリプト。 Pythonスクリプトが終了すると、それは他の側(サーバー上の)位置を含むJSON文字列、拡張子など
{"succes": true, "content": {"nrofpieces": 16, "size": {"width": 1096, "height": 961}, "directoryname": "Mako", "extension": "jpeg"}}
を出力するためのCGIスクリプトを照会しますHTML、JS、(CSS)コンボ画像。
$(document).ready(function() {
var artiest = $("#artiest")
var rijen = $("#rijen")
var kolommen = $("#kolommen")
var speelveld = $("#speelveld")
var search = $("#search")
$("#buttonClick").click(function() {
var artiestZ = artiest.val()
var rijenZ = rijen.val()
var kolommenZ = kolommen.val()
$.getJSON("http://localhost:8000/cgi-bin/cgiScript.py", "artiest=" + artiestZ + "&rijen=" + rijenZ + "&kolommen=" + kolommenZ, function (JsonSring) {
console.log("HIIIIII")
if (JsonSring.succes === true){
console.log(JsonSring)
var baseUrl = "http://localhost:8000/"
var extension = JsonSring.content.extension
var url = baseUrl + JsonSring.content.directoryname + "/"
var amountX = rijenZ
var amountY = kolommenZ
for (var i = 0; i < amountX; i += 1){
for (var p = 0; p < amountY; p += 1){
console.log("HI")
var doc = new Image
doc.setAttribute("src", url + JsonSring.content.directoryname + i + "_" + p + "." +extension)
document.getElementById("speelveld").appendChild(doc)
}
}
}else {
// Search failed. Deal with it.
}
})
})
})
さまざまなHTML要素に様々なIDのリンク。 (テキストフィールド&ボタン& Divの)。
Beneathは、イメージファイルを含むフルフォルダのスクリーンショットです。
さて、ポイントに来ます。 srcを持つすべてのHTML imgタグは正しいようです。一部の画像は読み込まれませんが、他の画像は読み込まれません。私はまた、すべての画像が2秒間隔で読み込まれなかったことに気付きました。タイムアウトのようなものがありますか?
このすべてがローカルマシンから実行されているので、ディスクの速度とCPUが本当に問題に影響を与えるべきではありません。また、私が理解しているところから:imgタグの作成などの呼び出しは、getJsonからのコールバックで行われます。つまり、getJsonが終了/応答したときにのみ実行されます。
偉大なStackOverFlowコミュニティは、ここで何が起こっているのか考えていますか?
サーバー側で同時接続数を構成する数はいくつですか? –
@Lashane:これは私がサーバー側で使用するすべてのコードです。 https://gist.github.com/anonymous/deca2c05f14d781f851979d74581f6dd – MrKickkiller
ネットワークグラフを正しく読み取っていますか?各画像の読み込みには12.9秒かかりますか?それは、ローカルのWebサーバー上ではばかげて長いです。ファイルに輻輳があるようです。多分、Pythonスクリプトはそれらを非同期的に保存するか、さもなければそれらをロックします。一時的にコードの一部を無効にするとどうなるかを確認してください。 –