使用javascript（jquery）在后台异步加载图像

我有一份申请表，左边是一张图片，右边是一些输入文本。用户必须填写输入文本，然后单击“下一步”以显示下一幅图像。问题是图像很大，加载需要很长时间，而且很耗时

我想做的是，当用户从第一个图像开始填写表单时，例如，我想用ajax异步下载下一个图像，当用户完成对第一个图像的处理时，下一个图像将下载到客户端，当用户单击“下一步”时，浏览器将显示下一个图像，等等

我试过这个代码，但它不工作，因为我解释。页面正在等待两个图像加载，然后显示第一个图像，如有任何帮助，将不胜感激：

HTML

<img id="currentImage" src="currentImage.png" onload="currentImageLoad()"></img>
<img id="nextImage" style="display: none;"></img>

---

您可以使用jquery揭幕插件延迟加载图像

---

javascript是同步的。您可以延迟加载第二个图像，以防止出现以下情况：

function currentImageLoad(){
    $('#nextImage').attr('src' , 'nextImage.png');
}

---

这是你需要的，并不复杂。JQuery在这里仅用于简化选择/DOM操作

function currentImageLoad(){
    setTimeout(function() {
        $('#nextImage').attr('src' , 'nextImage.png');
    }, 10); // 10ms
}

附加图像
document.addEventListener（'DOMContentLoaded'，function（）{
//1.创建图像对象并加载图像文件（无处显示）
var image\u url='1〕https://image.spreadshirtmedia.net/image-server/v1/compositions/123658308/views/1，宽=300，高=300，版本=1472099537/evil-maenner-premium-t-shirt.jpg'，
图像=新图像（）；
image.src=image\u url；
//2.创建一个新的“）.appendTo（$（“#图像框”）；
});
});

标签已删除。如果我做得不对，请告诉我。@HovercraftFullOfEels不好，我正在使用JSF，这就是为什么我认为它会有帮助。

<!-- click this button to append the image to #image-frame -->
<button id="append-image">append image</button>

<!-- image will go here -->
<div id="image-frame"></div>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){

    // 1. create a image object and load the image file (this will display nowhere)
    var image_url = 'https://image.spreadshirtmedia.net/image-server/v1/compositions/123658308/views/1,width=300,height=300,version=1472099537/evil-maenner-premium-t-shirt.jpg',
        image = new Image();
    image.src = image_url;

    // 2. create a new <img> element and append to the frame
    // (the image will load from cache if the previous download is finished, or load from remote if it's not)
    $('#append-image').on('click', function(e){
        e.preventDefault();
        $('<img src="'+image_url+'">').appendTo($('#image-frame'));
    });
});
</script>