Question

我想显示低分辨率图像，并在完整页面渲染后开始加载高分辨率图像。只有当高分辨率图像完全加载时，我才想用高分辨率图像替换低分辨率图像。

我知道我应该使用

$(window).load(function(){
});

但是我该如何开始加载某个图像呢？我怎么知道图像加载的时间？

（我知道lazyload的存在，但是这个图像必须是元素的背景，所以我必须使用.css（“background-image”，var）并且我不能使用lazyload。）

Answer 1

使用此脚本预加载图像：

<div class="hidden">
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
                "images-1.png",
                "images-2.png",
                "images-3.png",
                "images-4.png"
            )
        //--><!]]>
    </script>
</div>

然后根据需要在html中使用低分辨率图像，并在需要时更改为高分辨率图像。预装的图像就在那里。

$(window).load(function(){
   $(selector).css('background-image',images[0]);
});

Answer 2

在您的HTML中

<img src='lowres.gif id='mypic'>

<script>
  var img = document.getElementById("mypic");
  var img2 = new Image();
  var img2.onload = function() {
    img.parent.insertBefore(img2, img);
    // Or hide it.
    img.style.display = "none";
  };
  var img2.src = XXXXX;
</script>

使用javascript预加载图像并在准备好时显示

2 个答案: