HTML Img не загружается

Question

Просто для удовольствия, я пытаюсь реализовать «15 головоломку», но вместо этого 16 изображений (от 1 музыки).

Вещь делится на 2 скрипта/стороны. 1 скрипт Cython Python, который будет выполнять запрос Last.FM + разбиение изображения на куски Y x Z. После завершения сценария питона выводит строку JSON, который содержит местоположение (на сервере), расширение и т.д.

{"succes": true, "content": {"nrofpieces": 16, "size": {"width": 1096, "height": 961}, "directoryname": "Mako", "extension": "jpeg"}} 

С другой стороны, является HTML, JS, (CSS) комбо, который будет запрашивать сценарий CGI для изображения.

$(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 элементов. (Текстовые поля & Кнопки & Div's).

Beneath - это скриншот полной папки, содержащей файлы изображений.

Теперь, приходя в точку. Все HTML-теги img с src кажутся правильными. Некоторые изображения не загружаются, но другие делают. Я также заметил, что все изображения не загружаются через 2 с. Есть какой-то тайм-аут, или так?

Все это время бежал из локальной машине, так что скорость диска и процессора не должны реально влиять на материю. Кроме того, из того, что я понимаю: вызов для создания img-тэгов и т. Д. Выполняется в обратном вызове из getJson, то есть он будет работать только тогда, когда getJson завершит/получил ответ.

У сообщества Great StackOverFlow есть идея, что здесь происходит?

Answer 1

Для того, чтобы поделиться своими знаниями/опытом с большим StackOverflow сообществом,

Малого предыстория

После прогрессирующей немного дальше в проект я начал работать в различные вопросы, идущих из JSON синтаксического анализа, чтобы не иметь Allow-Control-Allow-Origin: * заголовков , что затрудняет получение запроса Ajax (Client ==> Python CGI).

Тем временем я также начал разрабатывать свой основной рабочий стол (который по какой-либо причине имеет серьезные проблемы с версией управления Python или не имеет). Но из-за терминала на моем рабочем столе с Python 3.4+ не было модуля CGIHTTPServer. После небольшого количества копания я обнаружил, что CGIHTTPServer был перенесен в http.server, но при запуске обычного старого python -m http.server я заметил, что сценарий CGI не будет запущен. Он просто отобразится. Конечно, я забыл вариант -cgi.

Основное решение

раз я был успешно используя CGIHTTPServer, у меня были проблемы. Изображения не будут загружаться, как описано выше. Я подозреваю, что модуль просто не мог принять приличное количество запросов. Это означает, что когда внезапно появятся запросы Y x Z, это будет сложно доставить все данные. ==> Отключено соединение.

С момента перехода на python -m http.server -cgi проблем нет. В настоящее время работает над сеткой Bootstrap для всех этих изображений!

Thx @Lashane и @Ruud.