使用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預加載圖像並在準備就緒時顯示

回答

相關問題