자바스크립트를 사용하여 이미지 크기 조정 및 최적화 code_image 특수 효과 해결

한 클라이언트가 방금 구축한 웹사이트가 제대로 표시되지 않는다고 연락이 왔습니다. 저는 처음으로 독립적으로 완료한 프로젝트였기 때문에 그의 웹사이트를 빨리 열어서 보지 못했습니다. 뭐든 이상해요. 왜 비정상인지 다시 물었더니 프로젝트를 넘겨줄 때의 효과와 다르다고 하더라고요. ㅎㅎ, 만약 넘겨주는 중에 비정상이라면 당연히 프로젝트를 넘겨주지 않을 거라고 하더군요. 스크린샷을 찍으세요. 당연히 내용이 표시된 창을 연 것은 그가 방금 업로드한 사진이었다. 코드를 보면 max-width 를 쓴 것이 분명한데 왜 이런 상황이 계속 발생하는 걸까요? 갑자기 나는 그가 보낸 사진 속의 브라우저가 고대의 신성한 IE6처럼 불쾌해 보였다는 것을 발견했습니다! 확인해보니 정말 그랬고, 또 그랬다! 저는 정말 태만해서 IE6에서 테스트도 하지 않고 작업을 넘겼습니다.

IE6의 경우 프론트엔드 작업을 하시는 분들은 지원되지 않는 속성이 많아서 정말 짜증나고 무기력합니다. 하지만 아직도 많은 유저들이 사용하고 있으니 무시할 수는 없습니다. 호환성을 위해 동료들에게 조언을 구한 후 js 스케일링을 사용하여 IE6용 이미지를 표시하고 몇 가지 세부적인 최적화를 수행했습니다.

현재의 클라이언트 웹사이트는 상대적으로 규모가 작고 웹사이트 성능에 대한 요구 사항이 높지 않지만, 최적화는 장기적인 학습 과정이라고 생각합니다. img 태그의 onload 메소드를 사용하여 크기를 수정하는 함수를 호출하면 성능에 더 큰 영향을 미칠 것입니다. 또한 -expression 동작을 사용하는 것은 바람직하지 않은 것 같습니다(나중에 계속 확인할 예정). end 페이지가 로드될 때 트리거됩니다.

코드 복사 코드는 다음과 같습니다.

function resizeImage(img,width){
var image=new Image();
image.src=img.src;
var temp = image.width;
img.width = temp = (temp>width)?width:temp;
img.style.display = "inline";
}
function doResize(){
if($.browser.version==6&&$.browser.msie) $("img") .each( function(){resizeImage(this,100)});
}
window.onload = doResize;

이 코드는 resizeImage 함수를 사용하여 img를 결정하고 수정합니다. .width 속성. 원칙은 비교적 간단합니다. 이 코드 앞에 IE6 브라우저에 대한 판단도 추가했는데, 여전히 CSS가 이미지의 크기를 결정하도록 했습니다. 코드에서 이미지의 높이와 너비를 정의하지 않았기 때문에 스케일링 시 js가 등비 스케일링을 수행하도록 하는 대신 값 중 하나만 수정하고 다른 값은 적응시키도록 하면 됩니다. 약간의 최적화 바. 코드에 Jquery를 인용했습니다.(익숙해서요.) 이렇게 작성할 필요는 없습니다. 이렇게 작성한 이유는 DOM 요소가 반환된 후 함수가 균일하게 처리될 수 있기 때문입니다. 고객님들이 외부 링크의 이미지를 자주 사용하시는 점을 고려하면 이때 웹페이지의 표시 속도는 이미지 소스에 영향을 받기 때문에 페이지가 로딩되면 먼저 CSS를 이용하여 표시해야 할 이미지를 숨기고, 그런 다음 이미지 크기를 조정한 후 js 메서드를 사용하여 이미지를 표시하기 위해 IE6에 대한 또 다른 해킹을 만들었습니다.

코드를 복사하세요. 코드는 다음과 같습니다:

img{
display:inline !important;
display:none
max-width:180px>}