javascript - 从 Javascript 作为 base64 调用加载图像

Question

我正在尝试通过 django 网络服务器实现一个小型照片展示。下面您可以找到将图片加载到图像数组中并每 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);
}

Answer 1

您遇到的直接问题是因为 XMLHttpRequest 是异步，并且您正在处理竞争条件。这是您的代码现在正在执行的操作:

1. 启动一个循环并告诉浏览器查询 2 XMLHttpRequests。
2. 执行 showImage 方法(尽管我们不知道上面的 2 个 AJAX 请求是否已返回。)
3. 此行抛出异常:document.getElementById('imgshow').src = window.images[window.current];，因为 window.images 是空的。
4. setTimeout(showImage, 50000); 由于第 3 步出现异常而从未执行。

将 setTimeout 移至 document.getElementById('imgshow').src = window.images[window.current]; 行上方可能会起作用。然而，这是一个坏主意。

一种解决方案是完全删除循环，并延迟加载图像(仅在需要时加载它们)，如下所示:

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

function loadNextImage(i, callback) {
    // 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);
            callback.call();
        }
    };
    xmlhttp.open('GET', "http://127.0.0.1:8000/mirror/"+i);
    xmlhttp.send(null);
}

// Increments the image counter and loads the image if needed.
function stepImage() {
    // If we have reached the end of the images, restart.
    if(window.current >= window.imageCount){
        window.current = 0;
    }    
    // Make sure that the image is loaded in the images array,
    // if not, load the image, then show it.
    if(window.images.length <= window.current) {
        loadNextImage(window.current, showImage);
    }    
    // If it's already loaded, just show it.
    else showImage();
}

// Displays an image onto the page.
function showImage() {
  document.getElementById('imgshow').src = window.images[window.current];
  // The counter is not incremented until the image is shown!
  window.current++;
}

// Set a timer to render future images.
setInterval(stepImage, 3000);

// Render the first image.
stepImage();

<img id="imgshow" />