IE의 img 객체와 Firefox_Basic 지식의 차이점에 대한 혼란

JS를 디버깅할 때 역겨운 문제에 부딪혔기 때문에 테스트 프로그램을 만들어 모든 사람이 테스트할 수 있도록 온라인에 올렸습니다. 게시물 보기http://vchelp.net/cndevforum/subject_view.asp?page=-1&subject_id=165791

아래 테스트에 대해 설명하겠습니다.

이유는 이런 웹페이지를 만들고 싶어서 사용자가 사진을 올린 후, 사진이 500픽셀보다 큰 경우 , 그림이 클라이언트에 표시됩니다. 500픽셀 크기로 축소됩니다. 하지만 사용자가 이 크기 조정 과정을 보는 것을 원하지 않습니다. 그래서 먼저 이미지를 숨기고 전체 웹 페이지를 다운로드한 후 크기를 조정한 다음 조정된 이미지를 표시하려고 합니다.

그래서 먼저 img 태그의 style="display:none"을 설정한 후 window.onload에서 원본 이미지 크기를 얻어서 조정했습니다.


Firefox에서는 이미지 너비가 disolay=none이고 height는 원본 이미지의 실제 크기인데 IE에서는 둘 다 0

이므로 이미지 객체를 생성한 다음 src에 값을 할당하고 원본 이미지를 읽는 안전한 방법을 생각했습니다. 크기 정보:
var oImg = new Image();
oImg.src = docuent.getElementById("c010_jpg").src;
//oImg의 너비와 높이를 즉시 읽기
alert( [oImg.width, oImg .height]);

IE 테스트 결과 위 코드는 "0,0"을 출력하는 것으로 나타났습니다.
이는 IE가 디스플레이를 구문 분석할 때 다음을 의미하는 것으로 의심됩니다. img 태그가 없으면 이 사진을 다운로드하지 않으므로 위 코드가 oImg.src에 값을 할당한 후 IE는 대상 주소에서 사진을 다운로드해야 합니다. 물론 이 프로세스는 Firefox에서 비동기 프로세스입니다
. , 위 코드는 Firefox가 구문 분석한다는 것을 보여주는 올바른 정보를 출력합니다. 사진에 display:none을 사용하면 사진이 이미 다운로드된 것입니다. 앞으로 oImg.src에 값을 할당할 때 캐시에서 직접 얻어오기 때문에 속도가 빠릅니다.

생각해보면 좀 더 복잡하고 안전한 방법을 사용해야 했습니다:
var oImg = 새 이미지();
oImg.onload = function (){alert([oImg.width, oImg.height]);}
oImg.src = docuent.getElementById("c010_jpg").src;
//src가 로드된 후 이벤트 및 콜백 함수를 사용하여 oImg

의 너비와 높이를 출력할 방법이 없습니다. 이 비동기 프로세스를 처리하면 프로그램 구조가 보기 흉해 보입니다.

또한 w3c에서는 HTMLImageElement의 ReadyState 및 완전한 속성을 찾을 수 없습니다. ). Firefox는 완전한 속성을 구현하는 반면 IE는 완전한 속성과 ReadyState 속성을 구현하는 것으로 나타났습니다.

그러나 속성에 대한 두 가지 정의는 서로 다른 것 같습니다.
firefox: 이미지가 다운로드되었습니다. 완료 속성은 true이고, 다운로드가 완료되지 않으면 false입니다.
예: 이미지가 다운로드되지 않은 경우 ReadyState 속성은 초기화되지 않으며, 완료 속성은 false입니다. 다운로드가 완료되고, ReadyState가 완료되며, 이때 이미지가 표시되지 않으면 Complete는 false이고 표시(display:block) 후에 이 속성이 true가 됩니다

간단한 기능이 이렇게 될 줄은 몰랐습니다. 브라우저 호환성 문제는 원활하게 해결하기 어렵고, 특히 많은 세부 사항은 매우 낭비적입니다. 다른 사람들이 이러한 문제에 직면하면 서버 측 스크립트에서 이러한 문제를 해결하는 것을 고려해 보시기 바랍니다. 이는 브라우저 호환성에 대한 복잡한 테스트를 우회합니다.