이미지 너비와 height_javascript 기술을 얻는 js 메소드

이 글에서는 이미지의 너비와 높이를 얻는 다양한 JS 방법을 공유하고, 예제를 통해 이를 분석합니다.

1. 사진을 얻는 간단한 방법

// 图片地址 后面加时间戳是为了避免缓存
var img_url = ‘upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 打印
alert('width:'+img.width+',height:'+img.height);

결과는 다음과 같습니다.

이미지의 관련 데이터가 로드되기 전에는 기본적으로 이미지의 너비와 높이가 0이기 때문에 너비와 높이가 모두 0인 결과는 정상이므로 이렇게 최적화할 수 있습니다!

2. 로딩 후 인쇄

// 图片地址 后面加时间戳是为了避免缓存
var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 加载完成执行
img.onload = function(){
 // 打印
 alert('width:'+img.width+',height:'+img.height);
};

결과는 다음과 같습니다

onload를 통해 이미지의 너비와 높이를 얻을 수 있습니다. 그러나 더 큰 이미지를 로드하는 것은 일반적으로 느리고 비실용적입니다. 그러나 이미지가 브라우저에 의해 캐시되는 한 우리가 원하는 것은 자리 표시자입니다. 그래서 어떤 사람들은 캐시에서 가져올 때 이렇게 쓸 수도 있습니다.

3. Complete와 onload를 함께 사용하세요
캐싱 효과를 테스트하기 위해 다음 테스트 이미지의 URL에는 타임스탬프가 포함되어 있지 않다는 점에 유의하세요

// 图片地址
var img_url = 'upload/2013/13643608813441.jpg';
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 判断是否有缓存
if(img.complete){
 // 打印
 alert('from:complete : width:'+img.width+',height:'+img.height);
}else{
 // 加载完成执行
 img.onload = function(){
 // 打印
 alert('from:onload : width:'+img.width+',height:'+img.height);
 };
}

첫 번째 실행은 항상 onload에 의해 트리거됩니다.

다시 새로고침하면 거의 항상 캐시가 트리거됩니다

말할 필요도 없이 캐시에서 이미지의 너비와 높이를 읽는 것은 매우 편리하고 빠릅니다. 오늘 우리가 해결해 볼 것은 onload 없이 이미지의 너비와 높이를 더 빠르고 빠른 방법으로 얻는 것입니다. 은닉처. 우리는 종종 일부 사진이 완전히 다운로드되지는 않았지만 이미 자리 표시자가 있어서 조금씩 로드된다는 것을 알고 있습니다. 자리 표시자가 있으므로 이미지 리소스 서버에 응답을 요청한 후 반환해야 합니다. 그러나 서버가 응답하고 너비 및 높이 데이터를 반환하면 onload 이벤트와 같은 이벤트가 트리거되지 않습니다. 이로 인해 네 번째 방법이 탄생했습니다

4. 타임 루프 감지를 통해 획득
다음 예를 살펴보세요. 캐시에서 데이터를 읽는 것을 방지하기 위해 각 요청에 타임스탬프가 표시됩니다.

// 图片地址
var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
 document.body.innerHTML += '
from:check : width:'+img.width+',height:'+img.height+'
';
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
 document.body.innerHTML += '
from:onload : width:'+img.width+',height:'+img.height+'
';
 
 // 取消定时获取宽高
 clearInterval(set);
};

파이어폭스

IE7 8 9 10

크롬

위의 테스트를 통해 이미지의 너비와 높이를 정기적으로 감지하는 방법이 온로드보다 훨씬 빠르다는 것을 알았습니다. 이미지의 너비는 기본적으로 100밀리초 내에 얻을 수 있습니다. 높음, Chrome은 이미 첫 번째 루프에서도 데이터를 가져옵니다. 위 데이터 분석을 통해 실제로 타이밍 기능에서 그림의 너비와 높이가 0보다 크면 올바른 그림 너비와 높이가 얻어졌다는 것을 판단할 수 있습니다. 타이밍이나 온로드를 통해 너비와 높이를 얻는 데 얼마나 시간이 걸리는지 시간을 표시해 보겠습니다.

// 记录当前时间戳
var start_time = new Date().getTime();
 
// 图片地址
var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time;
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
 // 只要任何一方大于0
 // 表示已经服务器已经返回宽高
 if(img.width>0 || img.height>0){
 var diff = new Date().getTime() - start_time;
 document.body.innerHTML += '
from:check : width:'+img.width+',height:'+img.height+', time:'+diff+'ms
';
 clearInterval(set);
 }
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
 var diff = new Date().getTime() - start_time;
 document.body.innerHTML += 'from:onload : width:'+img.width+',height:'+img.height+', time:'+diff+'ms';
};

FireFox:

IE

크롬

2560*1600 크기의 이미지입니다. 각 브라우저의 실행 결과를 보면 이미지 크기를 빠르게 얻는 방법은 거의 200밀리초 이내이며, 로딩 시간은 최소 5초 정도라는 것을 알 수 있습니다. 이미지의 너비와 높이를 얻는 것은 매우 실용적입니다.

js를 이용하여 이미지의 너비와 높이를 구하는 다양한 방법의 장단점을 수많은 예시를 통해 분석하고 비교하였으니 필요에 따라 신중한 선택을 하시길 바랍니다.