从Javascript将图像作为base64调用加载

我正试图通过django Web服务器实现一个小型照片展示。在下面，您可以找到将图片加载到图像数组并每x毫秒更改一次图像的javascript代码。如果我只从django服务器加载一张图片（没有循环），它就可以工作，但它停止使用任何类型的循环

我很想知道为什么它不能以这种方式工作，并且非常乐意收到关于代码改进的其他反馈。我还不太熟悉ajax调用

此外：Django模板引擎提供了简化模板中使用的URL的简单方法。有没有办法在.js文件中也使用

{{%url%}

标记

window.images = [];
window.current = 0;
window.imageCount = 2;


function loadImages(){
    for(var i = 0; i < window.imageCount; i++){
        loadNextImage(i);
    }
    showImage();
}

function loadNextImage(i) {
    // https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest/
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            window.images.push("data:image/jpeg;base64," + xmlhttp.responseText);
        }
    };
    xmlhttp.open('GET', "http://127.0.0.1:8000/mirror/"+i);
    xmlhttp.send(null);
}

function showImage() {
    if(window.current >= window.imageCount){
        window.current = 0;
    }
    alert("current window count = "+ window.current);
    document.getElementById('imgshow').src = window.images[window.current];
    window.current = window.current + 1;
    setTimeout(showImage, 50000);
}

window.images=[]；
window.current=0；
window.imageCount=2；
函数loadImages（）{
对于（var i=0；i=window.imageCount）{
window.current=0；
}
警报（“当前窗口计数=“+window.current”）；
document.getElementById（'imgshow'）.src=window.images[window.current]；
window.current=window.current+1；
设置超时（showImage，50000）；
}

您遇到的直接问题是因为

XMLHttpRequest

是异步的，并且您正在处理竞争条件。下面是您的代码现在正在执行的操作：

启动一个循环，并告诉浏览器查询2

XMLHttpRequests

执行showImage方法（尽管我们不知道上面的2个AJAX请求是否已经返回）

在此行引发异常：

document.getElementById（'imgshow'）.src=window.images[window.current]因为
窗口。图像
为空
setTimeout（showImage，50000）从未执行

将
setTimeout
移动到
document.getElementById（'imgshow'）.src=window.images[window.current]上方行可能会工作。然而，这是一个坏主意。

一种解决方案是完全删除循环，并延迟加载图像（仅在需要时加载图像），如下所示：


window.images=[]；
window.current=0；
window.imageCount=2；
函数loadNextImage（i，回调）{
// https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest/
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
push（“数据：image/jpeg；base64，”+xmlhttp.responseText）；
callback.call（）；
}
};
xmlhttp.open（'GET'，'http://127.0.0.1:8000/mirror/“+i）；
xmlhttp.send（空）；
}
//增加图像计数器并在需要时加载图像。
函数stepImage（）{
//如果已到达图像的末尾，请重新启动。
如果（window.current>=window.imageCount）{
window.current=0；
}    
//确保图像已加载到图像数组中，
//如果没有，请加载图像，然后显示它。
如果（window.images.length您遇到的直接问题是因为
XMLHttpRequest
是异步的，并且您正在处理竞争条件。下面是您的代码现在正在执行的操作：

启动一个循环，并告诉浏览器查询2
XMLHttpRequests
执行showImage方法（尽管我们不知道上面的2个AJAX请求是否已经返回）
在此行引发异常：
document.getElementById（'imgshow'）.src=window.images[window.current]；
因为
window.images
为空
setTimeout（showImage，50000）；
从未执行，因为步骤3出现异常
将
setTimeout
移动到
document.getElementById（'imgshow'）.src=window.images[window.current]；
行上方可能会起作用。但是，这是个坏主意。

一种解决方案是完全删除循环，并延迟加载图像（仅在需要时加载图像），如下所示：


window.images=[]；
window.current=0；
window.imageCount=2；
函数loadNextImage（i，回调）{
// https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest/
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
push（“数据：image/jpeg；base64，”+xmlhttp.responseText）；
callback.call（）；
}
};
xmlhttp.open（'GET'，'http://127.0.0.1:8000/mirror/“+i）；
xmlhttp.send（空）；
}
//增加图像计数器并在需要时加载图像。
函数stepImage（）{
//如果已到达图像的末尾，请重新启动。
如果（window.current>=window.imageCount）{
window.current=0；
}    
//确保图像已加载到图像数组中，
//如果没有，请加载图像，然后显示它。
if（window.images.length非常感谢您的支持！它现在可以工作了。您处理异步活动的方式读起来非常流畅。这将帮助我提高js代码的质量。但我没有注意到异常情况。：）非常感谢您的支持！它现在可以工作了。您处理异步活动的方式读起来非常顺利。这将有助于我提高js代码的质量。但我没有注意到异常情况。：）