JavaScript + HTML - 异步加载背景图片？

Question

我发现很多主题都在描述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>

- Mark Schwed

---

可能是重复问题 https://dev59.com/fG855IYBdhLWcg3wiU71 - nandu

尝试将您的处理程序放在文档加载内部。 - Abhijit-K

看起来你唯一的问题是想要 img.src = "big.jpg"。然后当大图加载完成时，change_image() 将被调用，而不仅仅是小图加载时。 - Russell Zahniser

Answer 1

你尝试过这个吗？

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);
};

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

- Alex W

Answer 2

你知道最让人烦恼的是什么吗？如果你在自己的解决方案中忘记添加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>

- Mark Schwed