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

我想要显示低分辨率图像并在整个页面渲染后开始加载高分辨率图像。只有在高分辨率图像完全加载时，我才想用高分辨率图像替换低分辨率图像。使用javascript预加载图像并在准备就绪时显示

我知道我应该使用

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

可是我该怎么办真正开始加载一个特定的形象？我怎么知道图像何时加载？我知道lazyload的存在，但是这个图像必须是一个元素的背景，所以我必须使用.css（“background-image”，var），并且不能使用lazyload。）

来源

2014-03-25 Bart Rylant

onload事件可以在特定的图像进行绑定。 –

可能的重复[快速图像加载方法，低到高分辨率与多个背景 - javascript的解决方案？]（http://stackoverflow.com/questions/18906266/fast-image-loading-methods-low-to-high-res -with-多背景-javascri） – Djizeus

使用这个脚本预载的图片：

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

来源

2014-03-25 07:54:37

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

来源

2014-03-25 07:59:36

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

回答

相关问题