5

我发现了许多描述 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>
4

2 回答 2

4

你试过这个吗？

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/

于 2013-04-04T14:10:35.220 回答
4

你知道什么是真正令人讨厌的吗？如果您只是错过将 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>
于 2013-04-04T14:16:34.703 回答