더 작은 버전을로드하려면 모든 이미지 소스를 변경하십시오.

Question

내 웹 사이트 (<img> 및 background-image)의 모든 이미지 소스를 변경하고 싶습니다. 큰 이미지를로드하지 않고 소스를 변경하여 다른 폴더의 작은 버전을로드하려면 어떻게해야합니까? 단순 :

$('img').each(function() { 
    var src = $(this).attr('src'); 
    $(this).attr('src', '/small'+src); 
}); 

이 방법이 유용할까요?

Answer 1

이것은 작동하지 않습니다. 브라우저는 먼저 큰 이미지를로드하고 올바른 코드를 얻으면 (위의 코드로는 충분하지 않음) 새 페이지가로드됩니다.

새로운 <picture> 태그를 개인적으로 사용하고 브라우저에서 뷰포트 및 탐색중인 장치를 기반으로 필요한 이미지를 선택하도록 권합니다.

Here is more information about the element in MDN.

Answer 2

아니요, 작동하지 않습니다. 이 스크립트는 페이지가 브라우저에로드 된 후에 실행됩니다. 따라서이 스크립트를 실행하기 전에 모든 이미지가 이미 브라우저에로드되었을 것입니다.

이 경우 서버 측 코드를 변경하거나 this과 같은 지연로드 라이브러리를 사용하십시오.