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

【问题标题】：Asynchronous image loading in the background with javascript (jquery)使用javascript（jquery）在后台异步加载图像
【发布时间】：2017-01-19 12:39:27
【问题描述】：

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

我想要做的是当用户从第一张图片开始填写表单时，例如，我想开始使用 ajax 异步下载下一张图片，当用户完成第一张图片的工作时，下一张图片将下载到客户端，当用户点击next时，浏览器会显示下一张图片，以此类推。

我尝试了这段代码，但它没有像我解释的那样工作。该页面正在等待，直到两个图像都加载然后它显示第一张图像，任何帮助将不胜感激：

HTML

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

Javascript

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

【问题讨论】：

java 标签已移除。如果我做错了，请告诉我。
@HovercraftFullOfEels 不，没关系，我正在使用 JSF，这就是为什么我认为它会有所帮助。

标签： javascript jquery html image

【解决方案1】：

javascript 是同步的。您可以延迟第二张图片的加载来防止这种情况：

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

【讨论】：

【解决方案2】：

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

http://luis-almeida.github.io/unveil/

【讨论】：

【解决方案3】：

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

<!-- 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>

【讨论】：