小背景

Question

为了好玩，我试图实现一个＆＃34; 15拼图＆＃34;，但是有16张图片（来自1张音乐照片）。

该东西分为2个脚本/边。 1个Python CGI脚本，它将执行Last.FM查询+在Y x Z块中拆分图像。当python脚本完成时，它输出一个JSON字符串，其中包含位置（在服务器上），扩展名等。

$(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，JS，（CSS）组合，它将查询图像的CGI脚本。

function setRoute() {
var wayPts = "";
var cAddress = $("#companyAddr").text();
//slice the zip code off
cAddress = cAddress.slice(0, -6);
var driverDisplay = $("#orders").find('.driverDisplay');
for (i = 0; i < driverDisplay.length; i++){
    var directionsService = new google.maps.DirectionsService();
    var dlats = $(driverDisplay[i]).find('.dLat');
    var dlat = $(dlats[0]).text();
    var dlngs = $(driverDisplay[i]).find('.dLng');
    var dlng = $(dlngs[0]).text();
    dLatLng = new google.maps.LatLng($('#driverLat').text(), $('#driverLng').text());
    var stops = [];
    var delAddrs = $(driverDisplay[i]).find('.dAddr');
    for (var x = 0; x < delAddrs.length; x++) {
        var delAddr = $(delAddrs[x]).text();
        stops.push({ location: delAddr, stopover: true});
    }
    var request = {
        origin: dLatLng,
        destination: cAddress,
        waypoints: stops,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            console.trace(status);
            var data = response;
            //$('#eta').text(response.routes[0].legs[0].duration.text);
        }
        //else { $('#eta').text("?") }
    });
}    
}

}）

其中各种id链接到各种HTML元素。（Text Fields＆amp; Buttons＆amp; Div＆＃39;）。

Beneath是包含图像文件的完整文件夹的屏幕截图。

现在，来到这一点。所有带有src的HTML img标签看起来都是正确的。有些图片不会加载，有些则不加载。我还注意到所有图像都无法以2s的间隔加载。是否存在某种超时？或者

所有这些都是从本地计算机上运行的，所以磁盘速度和CPU不应该真正影响到这个问题。另外，根据我的理解：制作img标签等的调用是在getJson的回调中完成的，这意味着只有在getJson完成/得到回复时才会运行。

伟大的StackOverFlow社区是否知道这里发生了什么？

Answer 1

与伟大的StackOverflow社区分享我的知识/经验，

小背景

在进一步深入项目之后，我开始遇到从JSON解析到没有Allow-Control-Allow-Origin: *标头的各种问题，这使得很难获得Ajax请求（Client ==＆gt; Python CGI）完成。

与此同时，我也开始开发我的主桌面（出于某种原因，要么在Python版本上存在大量问题，要么没有）。但是由于桌面上的终端有Python 3.4+，因此没有模块CGIHTTPServer。经过少量的挖掘后，我发现CGIHTTPServer已经转移到http.server，但是当运行普通的python -m http.server时，我注意到CGI脚本无法运行。它会显示出来。当然，我忘记了选项-cgi。

主要解决方案

我成功使用CGIHTTPServer的时候，我遇到了麻烦。如上所述，图像不会加载。我怀疑该模块无法获得相当数量的请求。这意味着当突然发出Y x Z请求时，它很难提供所有数据。 ==＆GT;连接被拒绝。

自切换到python -m http.server -cgi以来，没有任何问题。目前正在为所有这些图像开发Bootstrap网格！

Thx @Lashane和@Ruud。

HTML Img无法加载

1 个答案:

小背景

主要解决方案