ホームページ  >  記事  >  ウェブフロントエンド  >  Proportional scaling_jquery の jQuery 画像プリロード実装コード

Proportional scaling_jquery の jQuery 画像プリロード実装コード

WBOY
WBOYオリジナル
2016-05-16 18:01:201398ブラウズ
コードをコピー コードは次のとおりです:

/*
* 画像のプリロードと自動ズーム
* scaling 自動的に同じ比率で拡大縮小するかどうか
* width 画像の最大の高さ
* height 画像の最大幅
* loadpic ロードされる画像のパス
* example $("*").LoadImage(true,w, h);
*/
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
if(loadpic==null) )loadpic="../images/loading.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(スケーリング) {
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); ("マージントップ", (height-t.height( ))/2);
}else{
t.width(img.width);
t.height(img.height);
t.css("margin-top", ( height-t.height())/2);
}
}
else{
if(img.height>height) {
t.height(height);
t.width((img.width*height)/img.height);
t.css("margin-top", (height-t.height) ())/2);
}else{
t.height(img.height); (height-t.height())/2);
}
}
}
}
}
// ffif(img.complete){
//alert( "getToCache!");
autoScaling()
}
$(this).attr("src") ,"");
varloading=$("< ;img alt="読み込み中..." title="画像の読み込み中..." src=""loadpic "" />"); t.hide();
t.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
t .attr("src",this.src);
t.show()
//alert("やっと!")
}); 🎜>
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。