데이터 URI로 이미지로드를 지연시키는 방법은 무엇입니까?

Question

데이터 URI를 사용하여 이미지를 한 페이지로드하고 script을 내 HTML 끝에 넣습니다. 이미지 src에 대한 일반 URL을 사용하는 것과 달리, 데이터는 HTML 페이지에 대한 HTTP 요청에 직접로드됩니다.

따라서이 방법으로로드 된 수백 개의 이미지 데이터가 있으므로 script은 페이지 끝 부분에 매우 늦게로드됩니다.

imate의로드와 함께 스크립트를 미리로드하거나 비동기 적으로로드하려면 이미지의로드를 지연시키는 방법이 있습니까 data?

<div> 
    <img src="data:image/png; base64, .........." alt=""> 
    <img src="data:image/png; base64, .........." alt=""> 
    <img src="data:image/png; base64, .........." alt=""> 
</div> 
<script type="text/javascript" src="my-script.js"></script> 

Answer 1

이 답변은 상당히 간단합니다. 이미지를 페이지로드와 동 기적으로로드하지 않으려면 인라인 이미지 데이터 URI를 사용하지 마십시오. 웹 페이지를 코딩 한 동작이 나타납니다.

원격 이미지 URL (비 데이터 URI)은 비동기 적으로로드되며로드되는 동안 스크립트를 실행할 수 있습니다.

또는 모든 데이터 URI를 페이지의 큰 문자열 배열에 넣은 다음 다른 javascript를 수행 한 후에 javascript를 사용하여 데이터 URI에서 이미지 개체를 구성 할 수 있습니다.