JQuery_jquery に基づく画像の自動スケーリングとトリミング

実は、私は長い間このようなエフェクトを書きたいと思っていました。その理由は何ですか?このメモを持ってお越しください。理解していると思います。
一般的なポータルサイトでは、Webサイトを美しく見せるために、様々なサイズの写真を均等に加工してアップロードするため、見栄えの良いWebサイトになります。見た目はきれいですが、残念なことに、私が遭遇する Web サイト編集者の 90% はプロフェッショナルではありません。
ウェブサイトの編集者が私のこれまでの努力を台無しにするのを防ぐために、私は次のようなことをすることにしました。

1. まず、CSS で画像のサイズを定義します。JS が実行されていない場合、最も正常なパフォーマンスである画像が表示されます。
2. 画像サイズを定義する各 CSS について。一般的には使用されない追加のコンテナです。ここでは斜体のタグ を選択し、その CSS を同じルート img の CSS とまったく同じになるように定義し、その CSS スタイルを定義します。コンテナ内の img で margin:0;padding:0;
これは私がやったことです:

コードをコピー コードは次のとおりです:

/*Public*/
cite {display: block;overflow:hidden;overflow:hidden !重要;}

/*コンテナ*/
#BigPic img{display:block;padding:2px;width:240px;height:160px ;border: 1px ソリッド #cccccc;}
#BigPic cite{display:block;padding:2px;width:240px;height:160px;border:1pxソリッド #cccccc;}
#BigPic cite img{display:ブロック;マージン:0px;パディング:0px;ボーダー:なし;}

3. 画像処理関数を定義し、画像の定義されたサイズと元のサイズを参照して、比率を維持しながら位置を埋めてから、トリミング コンテナーに配置します。
私のコード:

コードをコピー コードは次のとおりです:

//画像サイズの判定と処理、囲みコンテナーのトリミングによる - COoL
関数によるcutImgz(obj){
var image=new Image();
image.src=obj.src;

$this=$(obj) ;
var iwidth=$this.width();//CSS で固定された画像の表示幅を取得
var iheight=$this.height();//CSS で固定された画像の表示高さを取得
if (1*image.width*iheight!=1*iwidth*image.height){
- アウトアウトアウトアウトアウトスルーアウトスルーアウトスルースルースルーオフ 's ' s 's rightスルー スルー アウト スルー アウト スルー アウト スルー アウト ‐ through‐to‐‐‐‐‐‐ ライト、1*image.width*iheight!=1*iwidth*image.height_to/image.height>=iwidth/iheight ）{> $ this.width（iwidth 'px'）; ;
}
}



4. ページをロードするときに、すべての画像をスキャンして、キャッシュにある場合は直接処理されます。キャッシュにない場合は、onload によって処理されます。 .
(
キャッシュされた画像はロード数秒以内に処理されるため、onload イベントが定義される前にロードされており、画像がキャッシュにない場合は onload イベントがトリガーされません。直接処理すると、画像はロードされず、元のサイズは Image オブジェクトによって空の画像とみなされ、幅と高さは両方とも 0
)
私のコード:

コードをコピー

コードは次のとおりです。

$('img').each( function() {

var image=new Image();

image.src=this.src; if(image.complete){ //キャッシュに存在し、すぐに処理されます CutImgz(this ; });