4

최초 발행이 (업데이트 참조)UPDATE : AngularJS와의 응답 이미지 후손에 대한

내가 반응으로 구축하고있어 Angular.js 웹 사이트를 가지고있다. 다른 브라우저 너비에도 별도의 해상도 이미지를 사용하고 싶었습니다. 그래서, 나는 완벽하게 작동 할 것 같아 Picturefill.js을 우연히 만났습니다.

유일한 문제는 picturefill.js은 DOM이로드 된 후에 만 ​​작동한다는 것입니다. 특정 페이지에 Angular 템플릿과 부분 HTML 페이지를 사용하고 있으므로 브라우저 창 크기를 조정하지 않으면 내 이미지가로드되지 않습니다.

이것은 picturefill의 github 페이지에 대한 중요한 문제 (35 호)이지만 큰 문제가 아니었다 고 생각하는 것처럼 보였습니다. 그림 채우기 작업을 지연 로딩하는 방법에 대한 제안이 있지만 머리가 두렵습니다.

여기는 source code for picturefill.js에 대한 링크입니다. 필요한 경우 내 코드를 포함 할 수 있지만 라이브러리와 관련하여 문제가 될 것입니다.

업데이트 : 이것을 알아 내려고 다른 누구에게나 나는 응답 가능한 이미지를 통합하기 위해 AngularJS directive을 작성했습니다. 그것은 아주 새롭고, 나는 그것을 일하게 만들지 못했지만, 약속을 지키는 것처럼 보입니다.

두 번째 업데이트 :이 지침에는 버그가 있었지만 이후 수정되었습니다. 이제 AngularJS 웹 사이트에서 올바르게 작동합니다. 프로젝트에서 동적 경로를 사용하는 경우이 지시문은 제대로 작동하지 않습니다. 그래서, 제 경우에는 페이지 당 하나의 JSON 객체를 가져 오는 동적 경로 app/:objectID이 있습니다. 각 페이지에는 app/1, app/2와 같은 url이 있습니다 (객체 1과 객체 2에 대해). 그 경로가 실제로 변경된 적이 없기 때문에, 나는 그 지시가 재개하지 못했다고 생각한다.

내가 이해하지 못하는 내 해킹? waiting = truewaiting = false에서 97 행으로 변경하십시오. 이것에 대한 단점/부작용을 찾을 수 없으며 사용 예를 위해 작동하는 명령이 있습니다.

+0

이 똑같은 문제가 있습니다. AngularJS 지침을 확인 하겠지만 진행 상황이나 뉴스는 확인합니까? –

+0

예! 이 앞면에는 좋은 소식이 있습니다. 업데이트를 참조하십시오. 프로젝트에 동적 $ 경로가없는 한 지시문은 즉시 사용할 수 있습니다. – xEmptyCanx

+0

니스! ZIP을 다운로드했지만 현재 AngularJS 앱에 어떻게 통합해야합니까? 나는'bower.json','package.json','Gruntfile.js', 테스트 폴더 등 모든 여분의 파일들을 볼 수 있다는 것을 의미합니다. –

답변

4

Angular Picture을 살펴보십시오. @Tina 자체에서 영감을 얻어 Polyfill 2.0 구문을 사용합니다 (예 : 새로운 HTML5 picture 요소).

+0

이 기능을 구현하지는 못했지만이 요소를 사용하는 것과 관련하여 Angular가 지금까지 오게 된 것 같습니다. 좋은 제안 남자. – xEmptyCanx

0

또한 AngularJS와 함께 Picturefill을 사용하려고했지만 다른 해결책을 시도하는 대신 AngularJS와 함께 Picturefill을 사용하기 위해 this AngularJS directive을 개발하기로 결정했습니다. 구현 방법에 대한 지침과 함께 demo도 제공됩니다. 이것은 스코프가 제공하는 정적 및 동적 데이터와 함께 작동하며 bower를 사용하여 설치할 수 있습니다.