爲什麼使用JavaScript加載圖像序列有問題？

我在我的網站上加載了一系列圖片（50張圖片），儘管它在本地運行良好，但在網站正常運行時，它確實很慢/錯誤。我不認爲這是優化圖像的問題，因爲它們在文件大小上已經相當小。（每個68kb，總共爲1MB）。另外在我的網站上加載4MB gif來自同一主機的速度更快。有什麼我可以改變我的代碼來改善這一點？爲什麼使用JavaScript加載圖像序列有問題？

這是我目前有：（對JavaScript的）

 $(document).ready(function(){ 
     var counter = 1; 
     setInterval(function(){ 
      var src = 'spacefox_TT/'; 
      $('#animation').attr('src' , src+counter+'.jpg'); 
      counter++; 
      if(counter > 49){ 
       counter = 1 
      } 
     }, 50); 
    });

我的HTML是相當簡單的，看起來是這樣的：

<img id="animation" src="spacefox_TT/1.jpg">

因此，劇本只是遞增的JPG文件，直到49並重復。

對不起，如果這不明確，任何幫助！在此先感謝

來源

2017-02-12 sterz

你是否試圖每'50ms'連鎖'img''src'？在設置下一個'src'之前'javascript'在Question不會等待'img'的'load'完成。 – guest271314

嗨！我並沒有試圖每50ms鏈接一次。我不確定如何修改javascript，以便在設置下一個src之前加載img ... – sterz

每個圖像應顯示的持續時間是多少？ – guest271314

將這些圖像從服務器下載到用戶的瀏覽器需要一些時間，這就是爲什麼它首先會顯示爲越野車。我建議你使用gif，而不是每隔50ms嘗試更改圖像的src。這樣動畫在加載之前不會啓動。你的方法不是越野車，一般來說效率不高。

如果你真的想使用你的方法，那麼我建議你使用jQuery的onload。您可以將setInterval包裝到某個功能中，並且只有在加載完所有圖像後才執行該功能。

來源

2017-02-12 22:03:42 ruler23

我不想使用gif，因爲我不想犧牲圖像的質量。很高興知道onload！謝謝 – sterz

如果您打開瀏覽器的開發人員工具並觀看網絡選項卡，您會發現您實際上是在等待數千個瀏覽器無法像您一樣快速處理的圖像請求，重新添加它們。

您有幾個選擇，但有一點需要記住的是即使您拉動更大的文件，網絡請求的性能通常也會更好。

所以我推薦的是將你的50張圖片鏈接成一張非常寬的圖片（即50張相同尺寸的並排圖片）。你的基本HTML應該是這樣的：

<div class='image-frame'> 
    <img src='/image.jpg' alt='Product Image reel' /> 
</div>

然後你的基地CSS可能是這樣的：

.crop { 
    width: 200px; 
    height: 150px; 
    overflow: hidden; 
} 

.crop img { 
    width: 400px; 
    height: 300px; 
    margin: -75px 0 0 -100px; 
}

而且你可以使用JavaScript來消極和積極的保證金適用於圖像的圖像之間進行切換。請注意，寬度和邊距以及內容需要根據您使用的框架大小進行調整，我沒有仔細查看您當前擁有的圖像。

來源

2017-02-12 22:17:54 Paul

謝謝，這個迴應很有幫助！ – sterz

爲什麼使用JavaScript加載圖像序列有問題？

回答

相關問題