2016-04-19 14 views
2

ちょうど楽しみのために、私は "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は、イメージファイルを含むフルフォルダのスクリーンショットです。

Folder with IMG files

さて、ポイントに来ます。 srcを持つすべてのHTML imgタグは正しいようです。一部の画像は読み込まれませんが、他の画像は読み込まれません。私はまた、すべての画像が2秒間隔で読み込まれなかったことに気付きました。タイムアウトのようなものがありますか?

Result

このすべてがローカルマシンから実行されているので、ディスクの速度とCPUが本当に問題に影響を与えるべきではありません。また、私が理解しているところから:imgタグの作成などの呼び出しは、getJsonからのコールバックで行われます。つまり、getJsonが終了/応答したときにのみ実行されます。

偉大なStackOverFlowコミュニティは、ここで何が起こっているのか考えていますか?

+0

サーバー側で同時接続数を構成する数はいくつですか? –

+0

@Lashane:これは私がサーバー側で使用するすべてのコードです。 https://gist.github.com/anonymous/deca2c05f14d781f851979d74581f6dd – MrKickkiller

+0

ネットワークグラフを正しく読み取っていますか?各画像の読み込みには12.9秒かかりますか?それは、ローカルのWebサーバー上ではばかげて長いです。ファイルに輻輳があるようです。多分、Pythonスクリプトはそれらを非同期的に保存するか、さもなければそれらをロックします。一時的にコードの一部を無効にするとどうなるかを確認してください。 –

答えて

0

偉大StackOverflowのコミュニティと私の知識/経験を共有するには、

小裏話

プロジェクトにさらにビットを進めた後、私はAllow-Control-Allow-Origin: *ヘッダを持っていないためにJSONのパースから行くの様々な問題に遭遇し始めました、Ajaxリクエスト(クライアント==> Python CGI)を完了するのが非常に難しくなります。

私の主なデスクトップ(何らかの理由でPythonのバージョン管理に大きな問題があるか、まったくありません)でdev'ingを開始しました。しかし、私のデスクトップにあるPython 3.4以降の端末のため、CGIHTTPServerモジュールはありませんでした。 CGIHTTPServerがhttp.serverに転送されていることがわかりましたが、普通の古いpython -m http.serverを実行すると、CGIスクリプトが実行されないことに気付きました。それは単に表示されます。もちろん、私はオプション-cgiを忘れてしまった。

メインソリューション

私は正常にCGIHTTPServerを使用していた時代には、私が悩みを持っていました。画像は上記のように読み込まれません。私はモジュールがまともな量のリクエストを受け取れなかったと思う。突然Y x Zリクエストが入ったとき、それはすべてのデータを配信するのに苦労することを意味します。 ==>接続が拒否されました。

python -m http.server -cgiに切り替わって以来、それほど問題はありません。現在のところ、これらすべての画像のブートストラップグリッドに取り組んでいます!

Thx @Lashaneと@Ruud。

関連する問題