내 웹페이지에는 반복되는 배경 이미지가 있는 헤더 영역이 있습니다.

해상도가 약간 높고 스크롤 없이 볼 수 있는 부분 위에 있으므로 브라우저가 첫 번째 이미지 이외의 이미지 로드를 시작하지 않기를 바랍니다.

하지만 이미지의 순서도 무작위로 지정하고 싶습니다.

문제는 제가 정적 웹 호스트(Netlify)를 사용하고 있다는 것입니다.

내가 고려한 몇 가지 접근 방식은 다음과 같습니다.

• 평소처럼 요소를 문서에 넣은 다음 Javascript를 사용하여 요소를 쿼리하고 순서를 무작위로 지정합니다. 브라우저가 HTML에 도착하는 첫 번째 이미지를 로드하기 시작한 다음 무작위로 다른 위치로 이동하기 때문에 꺼려집니다. 나는 이런 상황을 피하고 싶다.
• 무작위화를 위해 일부 서버 코드를 사용하세요. 하지만 저는 이 기능만을 위해 서버를 운영하고 싶지 않습니다.
• 가능한 각 조합 또는 최소한 몇 가지 조합을 별도의 HTML 파일로 작성하고 엣지 기능에서 URL 재작성을 통해 무작위화합니다. 조금 지저분해 보입니다. 필요하지 않은 경우 엣지 기능을 사용하고 싶지 않습니다. 이는 걱정할 또 다른 할당량일 뿐이기 때문입니다.
• 페이지 응답을 가로채서 변경하는 로직을 Edge 함수에 작성하세요. 코드 자체는 더 복잡해지지만 제공된 파일은 덜 복잡해집니다. Edge 기능 실행에 대한 동일한 혐오감과 결합됩니다.

내가 원하는 것은 JS 코드를 실행하고, 짧은 로직을 실행하고, 브라우저가 전체 HTML 응답을 보기 전에 스트림에 마크업을 추가하는 것입니다. 그런 다음 JS를 끄는 사람들과 JS 실행을 원하지 않는 검색 엔진을 위해

제가 보기엔 그게 바로 document.write 하는 일이죠, 그렇죠?

모든 출처에서는 전염병 document.write처럼 피하라고 말합니다. 하지만 이것이 드물고 유효한 사용 사례인지 궁금합니다.

으아아아

이거 나쁜 생각인가요? 왜? 내 소원을 성취할 수 있는 더 좋은 방법이 있나요?