대용량 이미지가 페이지를 깨뜨리는 것을 방지하기 위한 jquery 기반 구현 코드(즉시 크기 조정)_jquery

이미지가 레이아웃을 깨뜨리는 것을 방지하기 위해 가장 일반적인 방법은 로딩 후 이미지 크기를 얻은 다음 이를 조정하여 로딩 프로세스 중에 여전히 깨지도록 하는 것입니다. 여기에서 Qzone 로그의 그림이 개선되었으며, 온로드가 완료된 후 원본 그림이 표시됩니다. 이전에 onload를 사용하여 작은 예를 작성한 적이 있습니다. http://www.planeart.cn/?p=1022

imgReady를 사용하면 img가 로드될 때까지 기다리지 않고 dom Ready에서 크로스 브라우저 이미지 적응을 달성할 수 있습니다. , 코드는 다음과 같습니다.
(3-17은 네티즌 크로스유가 지적한 오류를 수정하고 새 버전에서는 대체 이미지를 제거합니다.)

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

// jquery.autoIMG.js - 2010-04-02 - Tang Bin - http://planeArt.cn/ - MIT 라이센스
(function ( $) {
// css2.1 max-width 속성이 지원되는지 확인
var isMaxWidth = 'maxWidth' in document.documentElement.style,
// 확인 IE7 브라우저 지원 여부
isIE7 = ! -[1,] && !('prototype' in Image) && isMaxWidth

$.fn.autoIMG = function () {
var maxWidth; = this.width();

return this.find('img').each(function (i, img) {
// max-width 속성이 지원되면 이것을 사용하고, 그렇지 않으면 다음 방법을 사용하세요.
if (isMaxWidth) return img.style .maxWidth = maxWidth 'px';
var src = img.src;

// 원본 이미지 숨기기
img.style .display = 'none';
img.removeAttribute(' src');

// 이미지 헤더 크기 데이터를 얻은 후 즉시 이미지 조정
imgReady(src, function (width, height) ) {
// 비례적으로 크기 줄이기
if (width > ; maxWidth) {
height = maxWidth / width * height,
width = maxWidth
img.style.width = width; 'px';
img.style.height = 높이 'px';
//원본 이미지 표시
img.style.display =
img.setAttribute( 'src', src)
});

});

// IE7에서는 확대된 사진이 왜곡되므로 다음을 통해 문제를 해결하세요. 3차 보간
isIE7 && (function (c,d,s) {s=d.createElement ('style');d.getElementsByTagName('head')[0].appendChild(s);s.styleSheet&&(s .styleSheet.cssText =c)||s.appendChild(d.createTextNode(c))}) ('img {-ms-interpolation-mode:bicubic}',document)

/**
* 이미지 헤더 데이터 로딩 준비 이벤트
* @see http://www.planeart.cn/?p=1121
* @param {String} 이미지 경로
* @param {Function} 크기 준비됨(매개변수 1은 너비 수신, 매개변수 2는 높이 수신)
* @param {Function} 로딩 완료(선택 사항. 매개변수 1은 너비 수신, 매개변수 2는 높이 수신)
* @param {Function} 로딩 오류(선택 사항) )
*/
var imgReady = (function () {
var list = [ ], IntervalId = null,

// 대기열 실행에 사용
tick = function () {
var i = 0;
for (; i < list.length; i ) {
list[i].end ? list.splice(i--, 1) : list[i]() ;
};
!list.length && stop()
} ,

// 모든 타이머 대기열 중지
stop = function () {
clearInterval(intervalId) );
intervalId = null;
};

반환 함수(url, Ready, load, error) {
var check, width, height, newWidth, newHeight,
img = new Image();

img.src = url;

// 이미지가 캐시된 경우 캐시된 데이터를 직접 반환
if (img.complete) {
Ready(img.width, img.height);
load && load(img.width, img.height)
return;
}// 이미지 크기 변경 감지
width = img.width;
height = img.height;
check = function () {
newWidth = img.width;
newHeight = img.height; !== 너비 || newHeight !== 높이 || 이미지에 영역 감지가 있는 경우 다른 곳에서 로드할 때 사용할 수 있습니다.
newWidth * newHeight > 1024
ready(newWidth , newHeight);
check.end = true;
} ;
check()

// 로딩 후 이벤트
img.onerror () {
error && error();
check.end = true; img = img.onload = img.onerror =

// 로드된 이벤트
img.onload = function () {
load && load (img.width, img.height)
!check.end && check()// IE gif 애니메이션은 onload를 루프로 실행하려면 onload를 비워 두세요.
img = img.onload = img .onerror = null
}

// 대기열에 추가하고 정기적으로 실행합니다.
; !check.end) {
list.push(check);
// 상관없음 브라우저 성능 손실을 줄이기 위해 하나의 타이머만 표시되도록 허용하는 경우
if (intervalId === null) IntervalId = setInterval (틱, 40);
};
})( )(jQuery);
autoIMG 압축: 1.74kb, 호환 가능: Chrome | Sifari | IE7 | IE8 | ...

데모 호출: $('#demo p') 🎜 >
마찬가지로, 즐거운 DEMO 주소는 여기 있습니다:
http://demo.jb51.net/js/2011/autoimg/
추첨: 이전 기사와 함께 imgReady 기술의 기반을 마련했습니다. 이 이미지 적응형 플러그인을 구현하는 것이 매우 간단할 것이라고 생각했지만, 그 과정에서 웹킷 기반 브라우저에 문제가 발생했습니다. 나중에 웹킷에 존재하지 않는 버그가 있다는 것을 알게 되었습니다. 수정되었으며 웹킷은 img 다운로드를 중단할 수 없습니다. 오랜 고민 끝에 imgReady 함수와 이 예제를 업데이트했습니다.


패키지 다운로드 주소