我的網頁上有一個標題區域，其中有一些循環顯示的背景圖片。
它們的解析度有些高，而且位於首屏，因此我不希望瀏覽器開始加載第一個圖像之外的任何圖像。
但我還想隨機化圖像的順序。
問題在於我使用的是靜態 Web 主機 (Netlify)。
我考慮過的一些方法：
我想要做的是在瀏覽器看到整個 HTML 回應之前運行一些 JS 程式碼，運行一些簡短的邏輯，並向流中添加一些標記。然後我可以在 中為關閉 JS 的人和不想運行 JS 的搜尋引擎提供標準順序。
我發現這正是 document.write 所做的，不是嗎？
所有資源都說要像瘟疫一樣避免 document.write。但我想知道這是否是一個罕見的有效用例？
<html>
<body>
<p>This seems to work, and I kind of think it's not a terrible idea.</p>
<script type="application/javascript">
// Standard Fisher-Yates shuffle; not relevant
function shuffle(array) { let i = array.length, j; while (i != 0) { j = Math.floor(Math.random() * i); i--; [array[i], array[j]] = [array[j], array[i]]; } return array; }
const paras = [
"<p>para 1</p>",
"<p>para 2</p>",
"<p>para 3</p>",
"<p>para 4</p>",
];
shuffle(paras);
document.write(paras.join(""));
</script>
<noscript>
<p>para 1</p>
<p>para 2</p>
<p>para 3</p>
<p>para 4</p>
</noscript>
<p>Change my mind.</p>
</body>
</html>
這是一個糟糕的主意嗎？為什麼？有沒有更好的方法來實現我的願望？
是的，這不是一個好主意。該方法非常古老，並且具有可能因瀏覽器而異的特定行為。請參閱 https://developer.mozilla.org/en- US/docs/Web/API/Document/write 以了解更多資訊。
只需使用現代方法，例如：
#等等。隨機排列元素，因為這些元素對於渲染器/瀏覽器來說是安全的。
不過，針對您的特定用例的建議是：瀏覽器需要先載入 JavaScript 才能使其按照您想要的方式運作，但這可能不會發生。圖像可能仍在按照它們最初在 HTML 來源中的順序載入。如果可能的話，我建議將此邏輯移至伺服器。 最終，任何 Javascript 都可能不適用於您的用例。可能可以不在文件本身中包含圖像，然後透過 JS 添加它們（在隨機加載時），這將是我的首選方法。