Javascript+；HTML-在后台加载图像（异步？）

我发现了许多描述javascript图像加载的主题，但并不完全是我要搜索的内容

我目前正在以正常方式加载html格式的图像，如

<img src="images/big-image.jpg">

这会产生一个网页，其中有从上到下加载图像的空白空间。此外，我总是要观察图像的文件大小

我想要实现的是，当页面加载时，会显示每个图像的缩小版本（大约10kb）。当页面完全加载时，应该有一个javascript函数在后台加载大图像，并在加载时替换它们

我已经找到了一种使用javascript实现这一点的方法，但在替换所有图像之前，浏览器会显示他处于“加载”状态。是否可以使用异步方法在后台执行加载任务

<img src="small.jpg" id="image">

<script>
        <!--
            var img = new Image(); 
            img.onload = function() { 
               change_image(); 
            } 
            img.src = "small.jpg";  

            function change_image() {
                document.getElementById("image").src = "big.jpg";
            }
        //-->
</script>

您试过这个吗

window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.css');
        xhr.send('');
        // preload image
        new Image().src = "http://domain.tld/preload.png";
    }, 1000);
};

---

你知道什么是真正令人讨厌的吗？如果您只是错过了将window.onload函数添加到您自己的解决方案中，并且它可以按照您的需要工作

谢谢你的主意D

<img src="small.jpg" id="image">

<script>
        <!--
            window.onload = function() {
                var img = new Image(); 
            img.onload = function() { 
               change_image(); 
            } 
            img.src = "small.jpg";  

            function change_image() {
                document.getElementById("image").src = "big.jpg";
            }
            };


        //-->
</script>

可能重复请尝试将处理程序放在文档加载中。看起来您唯一的问题是希望使用

img.src=“big.jpg”

。然后，当大映像完全加载时，将调用

change\u image（）

，而不仅仅是当小映像加载时。