從Java腳本將圖像加載為base64調用

Question

我正在嘗試通過django網絡服務器實現一個小型照片展示。 在下面，您可以找到將圖片加載到images數組並每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方法（即使我們不知道上面的那兩個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" />