使用JavaScript同步請求圖像？
[英]Request images synchronously using JavaScript?
問題描述
我正在嘗試使用JavaScript來控制圖像的加載。 存儲這些圖像的服務器一次只能處理1個請求，因此，包含兩個或更多圖像的網頁將導致向服務器發送多個請求（過載，導致返回格式錯誤的圖像）。
以下是顯示圖像的頁面示例...
<html>
<head>
<title>Load Images Synchronously</title>
</head>
<body>
<table align="left" border="1" cellpadding="0" cellspacing="0" style="width:500px;">
<tbody>
<tr>
<td height="50px" style="text-align: center;"><img id="img1" src="" /></td>
</tr>
<tr>
<td height="50px" style="text-align: center;"><img id="img2" src="" /></td>
</tr>
<tr>
<td height="50px" style="text-align: center;"><img id="img3" src="" /></td>
</tr>
<tr>
<td height="50px" style="text-align: center;"><img id="img4" src="" /></td>
</tr>
<tr>
<td height="50px" style="text-align: center;"><img id="img5" src="" /></td>
</tr>
</tbody>
</table>
</body>
</html>
如您所見，其中包含5個圖像標記，這些標記通過html中的腳本加載（如下所示）。 設置img標簽的scr，將顯示圖像，但是仍然需要異步請求它們。
<script>
document.getElementById("img1").scr="image1.png"
document.getElementById("img2").scr="image2.png"
document.getElementById("img3").scr="image3.png"
document.getElementById("img4").scr="image4.png"
document.getElementById("img5").scr="image5.png"
</script>
我需要知道如何依次加載這些映像，以免使低功耗服務器過載。
我曾嘗試使用IF語句來檢查圖像的“自然高度”（如果為0，則表示圖像尚未加載），但是我對JavaScript還是很陌生，並且為此感到困惑。
我正在尋找一種簡單的解決方案（也許是環繞函數的解決方案），並且將在嘗試加載下一個圖像之前檢查圖像是否已加載。
我還要求代碼檢查圖像加載100次，其間有100ms的延遲。 如果此時間之后圖像尚未加載，請繼續前進。
請一些boffin可以給我一些如何編寫代碼的指導嗎？
2 個解決方案
解決方案1
0 2015-08-25 13:34:26
我認為您以錯誤的方式解決了這個問題。 在Javascript中，當另一個線程加載圖像時，您不能在線程中等待，而必須使用回調。
您的解決方案可能是添加所有要加載到陣列中的圖像，然后啟動第一個圖像的加載。 在加載的成功回調方法中，進行顯示，從數組中刪除已加載的圖像，然后再次調用該方法以加載Array的新的第一張圖像。 它將一直運行，直到所有圖像都消失為止。
解決方案2
0 已采納 2015-08-25 13:46:54
您可以使用image onload回調序列化圖像加載。 創建要加載的圖像列表，並與ID列表匹配。
var srclist = ["src1", "src2", ....];
var idlist = ["img1", "img2", ....];
function loadImage(index){
var image = document.getElementById(idlist[index]);
image.onload = function() {
index++;
if(index < idlist.length) {
loadImage(index);
}
}
image.onerror = function() {
//better handle this
}
image.src = srclist[index];
}
loadImage(0);
您需要考慮如果圖像加載失敗會發生什么-這將導致索引編制工作中斷。
使用FileReader在Javascript中同步讀取多個文件
[英]Reading multiple files synchronously in Javascript using FileReader
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.