1
누군가 화면의 배율 (너비)을 img 요소의 100 %로 알 수 있으며 애니메이션에서 큰 성과를 유지할 수 있습니까?이미지 배율 및 애니메이션 향상
첫 번째 예에서는 width 속성을 100%으로 설정했습니다. 테스트 목적을 위해 성능 덩어리를보기 위해이 피들에서 애니메이션 루프를 만들었습니다 : http://jsfiddle.net/tXXmm/1/. 이미지가 부모 요소의 overflow으로 숨겨져있을 때 35fps이 있습니다. 내가 width 속성을 제거하면
, 난 같은 예 초당 60 프레임 있습니다 http://jsfiddle.net/tXXmm/2/
내가 첫 번째 예제와 같은 결과를 얻을 수있는 몇 가지 방법이 있다면 알 필요가
, 두 번째 예제의 성능. 다음 사항을 고려하십시오. 이미지 해상도가 다양합니다. 상위 요소 만 height: 500px;입니다. 또한, 내 디자인은 유체 디자인입니다 (내 이미지의 너비가 화면의 전체 너비를 조정해야하는 이유입니다).
모든 솔루션에 감사드립니다 (PHP, JS, CSS ...). 감사합니다.
자바 스크립트를 통해 창 너비를 가져온 다음 이미지로 설정하는 방법은 어떻습니까? – stackErr
안녕하세요 @stackErr, 답변 주셔서 감사합니다! 그것은 이미지의 성능을 바꾸지 않는 것 같습니다 (바이올린에서 35fps). 그것은 이미지가 원래 너비가 같지 않기 때문입니다. (?) – DrSAS
HTML에서 실제 높이/너비로 속성을 설정하고 CSS에서 너비를 재설정하면 어떨까요? 브라우저가 크기를 알기 위해 이미지를 완전히 업로드 할 필요가 없습니다. http://jsfiddle.net/tXXmm/4/ (이 답변을한다면, 내가 그 중 하나를 만들 것입니다) –