jquery 이미지 미리 로드 자동 비례 배율 플러그인_jquery

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

/*
******* *** ****사진 미리 로드 플러그인****************
///작성자: Wu Jian (2008-06-23)
// /http ://regedit.cnblogs.com

///설명: 이미지가 로드되기 전에 로딩 표시를 표시하고, 이미지가 다운로드된 후에 이미지를 표시합니다.
이미지를 자동으로 확대/축소할 수 있습니다
이 플러그인을 사용하면 페이지를 먼저 로드하고 이미지를 나중에 로드할 수 있습니다.
이미지를 표시한 후 확대하기 전에 레이아웃을 확장해야 하는 문제를 해결하세요.
/ /매개변수 설정:
동일한 비율로 자동 크기 조정 여부
이미지의 너비 최대 높이
이미지의 높이 최대 너비
로딩 이미지의 loadpic 경로
*/
jQuery.fn.LoadImage=function(scaling,width ,height,loadpic){
if(loadpic==null)loadpic="load3.gif";
return this.each(function(){
var t=$(this);
var src=$(this).attr("src")
var img=new Image()
//alert("Loading")
img.src=src;
// 이미지 크기 자동 조정
var autoScaling=function(){
if(scaling){

if(img.width>0 && img.height> 0){
if(img.width /img.height>=너비/높이){
if(img.width>width){
t.width(width)
t.height; ((img.height*width)/img.width);
}else{
t.width(img.width)
t.height(img.height)
}
else{
if (img.height>height){
t.height(height)
t.width((img.width*height)/img.height); 🎜>}else{
t.width(img.width);
t.height(img.height)
}
}
}
}
}
//ff 이미지 캐싱
if(img.complete){
//alert("getToCache!")
autoScaling()
return; 🎜>}
$(this).attr ("src","")
var loading=$("");

t.hide();
t.after(loading)
$(img).load(function(){
autoScaling();
loading.remove();
t.attr("src",this.src)
t.show()
//alert("finally!")
} );

}) ;
}


사용 지침:
$("div img").LoadImage(true,120,90); >효과는 다음과 같습니다.

테스트 주소
http://img.jb51.net/online/jqueryLoadImage/demo.htm


파일 패키지 다운로드