자체 사용에 권장되는 Javascript 썸네일 기능(onDOMLoaded)..._이미지 특수 효과

070520: Norman Jun은 Dean Edwards와 기타 크로스 브라우저 솔루션을 onDOMLoaded 이벤트에 제공했습니다...
사실 onDOMLoaded는 DOM이 로드될 때 "존재하지 않는" 이벤트입니다(이미지가 아직 로드되지 않았습니다). 로드됨) ...
브라우저마다 지원 수준이 다르기 때문에...
Hack이 필요합니다...
다행히 Dean과 다른 친구들이 계속해서 연구한 끝에 해결책을 찾았습니다. ...
감사의 마음을 전하고 싶습니다 ...
섬네일 기능 자체의 개선은 이전 버전의 두 가지 모드를 (빠르고 원활하게) 병합한 것입니다...
소위 빠른 모드는 while 루프를 사용합니다...
빠르지만 애니메이션이 정지되기 쉽습니다...
일명 젠틀 모드는 위의 문제를 해결하기 위해 setInterval 함수를 사용합니다...
안타깝게도 setInterval에는 최소 주기 제한이 있습니다...
그래서 속도가 느려지네요...
빠른 모드에서 부드러운 모드로 전환 임계값을 500으로 설정했습니다...
즉, 페이지의 이미지 크기가 500에 도달하면 젠틀 모드가 활성화되어 이미지를 줄일 수 있습니다...
필요에 따라 변경할 수 있습니다...
자세한 내용을 참조하세요. resizeImgs의 두 번째 줄 함수...

070516: 코드 성능 향상에 대한 제안에 대해 Norman에게 감사드립니다...
모든 요소 순회를 이미지 배열 순회로 변경...
Norman의 제안에 대해 이미지 읽기 전 썸네일링...
구현 실패...
첫째, Firefox가 onreadystatechange 이벤트를 지원하지 않기 때문입니다(onload만?)...
둘째, 테스트 중입니다. IE에서 대화형 상태의 이미지 크기 조정도 실행하기 전에 새로 고쳐야 한다는 것을 알았습니다...
즉, 작업 전에 페이지가 로드될 때까지(또는 한 번 로드될 때까지 기다려야 함) 할 수 있습니다...
재능과 지식이 부족해서 죄송합니다...
해결책이 있으면 교수님에게 메시지를 남겨주세요...

원칙은 어떤가요? ..
이미지 배열을 순회하는 것입니다...
resize 속성이 정의되어 있으면 썸네일을 수행합니다...
resize 시 값이 숫자(원본 너비보다 작은 경우) 이미지), 디지털 너비로 줄어듭니다...
resize가 다른 값이면 기본 너비로 줄어듭니다...
height 속성을 지워야 하는 이유는...
답변: 가로와 세로의 비율을 유지하기 위해...
위...

코드가 너무 길어서...
아직 게시되지 않았습니다.. .
사용방법은 데모를 참고해주세요...

위 내용은 자바스크립트 썸네일 기능(onDOMLoaded)..._image 특수효과에 대한 내용입니다. PHP 중국어 홈페이지(www.php.cn)!