Ng-lazyload-image: 레이지로드 및 srcset

안녕하세요,

이 라이브러리는 불행히도 srcset을 지원하지 않지만 지원해야 합니다. 상당히 중요한 기능입니다.

즉, 브라우저가 수행하는 것과 같은 방식으로 srcset을 구문 분석하고 이해해야 하기 때문에 지원하기가 쉽지 않습니다.

옵션 1:

우리는 srcset을 특별한 경우로 취급하고 배경에서 이미지를 로드하려고 하지 않고 대신 이미지가 뷰포트일 때 srcset 설정합니다.
다음 html 태그가 있다고 가정해 보겠습니다.
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
이미지가 뷰포트에 있을 때 srcset 살펴보고 lazyLoad 에 srcset -string이 포함되어 있음을 감지하고 태그를 다음과 같이 변환합니다.
<img srcset="small.jpg 300w, large.jpg 500w">

찬성:
간단한 구현
범죄자:
사용자는 "defaultImage"를 절대 볼 수 없습니다.
이미지를 로드하는 동안 네트워크 오류를 처리할 수 없습니다.

옵션 2:

우리는 srcset 구문 분석하고 최상의 옵션을 선택합니다(브라우저가 수행했어야 한다고 생각하는 것처럼).
다음 html 태그가 있다고 가정해 보겠습니다.
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
lazyLoad 에 srcset 가 포함되어 있음을 감지하고 문자열을 다음과 같이 구문 분석합니다.
[ { url: 'small.jpg', width: 300 }, { url: 'large.jpg', width: 500 } ]
브라우저 너비(및 장치 픽셀 비율 )와 비교하여 최상의 이미지를 선택합니다. 백그라운드에서 이미지를 로드하고 로드될 때 srcset 하고 이미지가 캐시에 있으므로 즉시 로드됩니다.

찬성:
이미지가 지연 로드됩니다 🎉
사용자는 기본 이미지를 보게 됩니다.
네트워크 오류를 처리할 수 있습니다( srcset 에서 다른 이미지를 로드해야 합니까 아니면 오류 이미지를 로드해야 합니까?).
범죄자:
브라우저에서 수행해야 하는 것과 같은 방식으로 문자열을 구문 분석하는 것은 항상 까다롭습니다. 우리는 아마도 일부 엣지 사용 사례를 놓칠 것입니다.
내 이해에 따르면 브라우저는 캐시에 저장된 경우 항상 가장 큰 이미지를 사용합니다. 이미지가 이미 로드되었는지 알 수 있는 방법이 없으므로 가장 잘 맞는 이미지를 로드해야 합니다(그러나 srcset 설정한 후에 가장 큰 이미지가 표시됨). 예를 들어 다음 srcset small.jpg 300w, large.jpg 500w 있고 화면이 500픽셀 미만이지만 large.jpg 가 이미 로드되어 있다고 가정해 보겠습니다. 내 이해에 따르면 브라우저는 캐시에 있기 때문에 large.jpg 를 선택해야 하지만 small.jpg 로드할지 모르기 때문에 로드될 때 srcset 및 브라우저는 large.jpg (그러나 틀릴 수 있음). 즉, 불필요하게 이미지를 로드했습니다.

결론:

나는 옵션 2가 가능하다고 생각하고(너무 어렵지 않아야 함) 우리가 해야 한다고 생각합니다. 그러나 지금은 시간이 매우 제한되어 있지만 기꺼이 PR을 수락합니다. :)

@tjoskar님 , 빠른 답변 감사합니다. 두 번째 옵션이 가능하다는 데 동의합니다. 또한 마감 시간이 얼마 남지 않았기 때문에 지금은 시간이 많지 않습니다. 하지만 시간이 더 생기면 이 기능에 기여하고 싶습니다. 특히 내가 이미 게으른 지원을 위해 라이브러리의 동작을 확장했다는 점을 고려하면 hlink.href 속성을 사용하여 이미지 태그 로드 :)

또는 기본 브라우저 srcset 옵션을 무시하고 자신의 의사 결정 프로세스로 구현하고 시간을 두고 조정하여 가능한 한 최고가 되도록 합니다. :)

투기

사양만 준수하면 되며 사양이 매우 간단하다고 생각합니다.

그러나 당신이 지적했듯이 브라우저 구현은 여기서 달성하고자 하는 것을 깨뜨릴 수 있으므로 우회해야 한다고 생각합니다.

반응형 이미지 지원을 둘 다에 추가하는 풀 리퀘스트(#231)를 제출했습니다. 나는 어떤 입력을 기다리고 있습니다.

이것은 3.4.0 포함되어 있습니다. @sapierens 감사