从Java脚本将图像加载为base64调用

Question

I am trying to implement a small photo show via a django webserver. Below you can find the javascript code that loads the pictures into the images array and changes the images every x miliseconds. It works if I only load one picture (without the loop) from my django server but it stops working with any kind of loop.

I would love to know why it does not work this way and would be more than happy to receive some other feedback about code improvements. I am not very familiar with ajax calls yet.

Moreover: Django Templates Engine provides a easy way to simplify urls used in the templates. Is there a way to use the {{% url %}} tag inside a .js File as well?

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

The direct problem you are encountering is because XMLHttpRequest is Asynchronous and you are dealing with a race condition. Here is what your code now is doing:

1. Start a loop and tell the browser to que 2 XMLHttpRequests .
2. Perform the showImage method (even though we have no idea if those 2 AJAX Requests above have returned yet.)
3. An exception is thrown at this line: document.getElementById('imgshow').src = window.images[window.current]; because window.images is empty.
4. setTimeout(showImage, 50000); is never executed because of the exception at step 3.

Moving the setTimeout above the document.getElementById('imgshow').src = window.images[window.current]; line might work. However, this is a bad idea.

One solution would be to remove the loop at all, and lazy load the images (only load them once they are needed) as seen below:

 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" />